Skip to content

Implemented a “Show More / Show Less” feature for skill suggestion chips on the homepage. #288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Pranathi-Kunjeti wants to merge 3 commits into
base: main
Choose a base branch
from
+71 −18
Open

Implemented a “Show More / Show Less” feature for skill suggestion chips on the homepage. #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec1c936
feat: limit visible skill suggestions with show more option
Pranathi-Kunjeti May 18, 2026
db0568d
feat: limit visible skill suggestions with show more option
Pranathi-Kunjeti May 18, 2026
c6acfd6
Merge branch 'main' into feat/limit-skill-suggestions
Pranathi-Kunjeti May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,33 @@ if (isIndexPage) {
syncSuggestionsA11yState();
}

// Skills expansion state (shared across multiple function calls)
var skillsExpanded = false;

// Initialize toggle button once (moved outside updateQuickPickState to prevent duplicate listeners)
(function initToggleButton() {
var toggleBtn = document.getElementById("toggleSkillsBtn");
if (toggleBtn) {
toggleBtn.addEventListener("click", function () {
var hiddenSkills = document.querySelectorAll(".extra-skill");

for (var i = 0; i < hiddenSkills.length; i++) {
hiddenSkills[i].style.display = skillsExpanded
? "none"
: "inline-flex";
}

skillsExpanded = !skillsExpanded;

toggleBtn.textContent = skillsExpanded
? "Show Less"
: "Show More";
});
}
})();

function updateQuickPickState() {
// Update the quick-pick chip states based on selected skills
quickPickChips.forEach(function (chip) {
var isActive = isSkillSelected(chip.getAttribute("data-skill") || "");
chip.classList.toggle("active", isActive);
Expand Down
23 changes: 23 additions & 0 deletions static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -986,12 +986,35 @@ label {
cursor: pointer;
transition: background var(--t), border-color var(--t), color var(--t);
}
.extra-skill {
display: none;
}

.skill-chip:hover, .skill-chip.active {
background: var(--indigo-700);
border-color: var(--indigo-700);
color: var(--white);
}/* Hide extra skill chips initially */


/* Toggle button for extra skills */
.toggle-skills-btn {
margin-top: 12px;
background: transparent;
border: none;
color: var(--indigo-600);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 4px 0;
transition: color var(--t);
}

.toggle-skills-btn:hover {
color: var(--indigo-800);
}


/* Select wrapper with custom chevron */
.select-wrap { position: relative; }
.select-wrap::after {
Expand Down
40 changes: 22 additions & 18 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,25 +378,29 @@ <h2 class="section-title">Find Your Next Project</h2>
</div>

<!-- Quick-select skill chips -->
<div class="skill-chips-row" id="skill-chips-available">
<button type="button" class="skill-chip" data-skill="Python">Python</button>
<button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
<button type="button" class="skill-chip" data-skill="HTML">HTML</button>
<button type="button" class="skill-chip" data-skill="CSS">CSS</button>
<button type="button" class="skill-chip" data-skill="Flask">Flask</button>
<button type="button" class="skill-chip" data-skill="SQL">SQL</button>
<button type="button" class="skill-chip" data-skill="React">React</button>
<button type="button" class="skill-chip" data-skill="Node.js">Node.js</button>
<button type="button" class="skill-chip" data-skill="C++">C++</button>
<button type="button" class="skill-chip" data-skill="Java">Java</button>
<button type="button" class="skill-chip" data-skill="TypeScript">TypeScript</button>
<button type="button" class="skill-chip" data-skill="Go">Go</button>
<button type="button" class="skill-chip" data-skill="Rust">Rust</button>
<button type="button" class="skill-chip" data-skill="C#">C#</button>
<button type="button" class="skill-chip" data-skill="Kotlin">Kotlin</button>

</div>

<div class="skill-chips-row" id="skill-chips-available">
<button type="button" class="skill-chip" data-skill="Python">Python</button>
<button type="button" class="skill-chip" data-skill="JavaScript">JavaScript</button>
<button type="button" class="skill-chip" data-skill="HTML">HTML</button>
<button type="button" class="skill-chip" data-skill="CSS">CSS</button>
<button type="button" class="skill-chip" data-skill="Flask">Flask</button>
<button type="button" class="skill-chip" data-skill="SQL">SQL</button>

<button type="button" class="skill-chip extra-skill" data-skill="React">React</button>
<button type="button" class="skill-chip extra-skill" data-skill="Node.js">Node.js</button>
<button type="button" class="skill-chip extra-skill" data-skill="C++">C++</button>
<button type="button" class="skill-chip extra-skill" data-skill="Java">Java</button>
<button type="button" class="skill-chip extra-skill" data-skill="TypeScript">TypeScript</button>
<button type="button" class="skill-chip extra-skill" data-skill="Go">Go</button>
<button type="button" class="skill-chip extra-skill" data-skill="Rust">Rust</button>
<button type="button" class="skill-chip extra-skill" data-skill="C#">C#</button>
<button type="button" class="skill-chip extra-skill" data-skill="Kotlin">Kotlin</button>
</div>

<button type="button" id="toggleSkillsBtn" class="toggle-skills-btn">
Show More
</button>
<!-- Level + Interest in a row -->
<div class="form-row">
<div class="form-group">
Expand Down
Loading