I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all element. Initially, I used .click() method, but then switched to .on("click", function) without any success.
$(document).ready(function() {
$(".accordion .accordion-trigger.accordion-trigger-single:not(.open) + .skill-container").hide()
$(".accordion .accordion-trigger.accordion-trigger-single").click(function() {
$(this).next(".skill-container").slideToggle()
$(this).toggleClass("open")
toggleAll()
})
function toggleAll() {
if ($(".skill-container").is(":hidden")) {
$(".accordion .accordion-trigger.accordion-trigger-all h3").html("Open All")
$(".accordion .accordion-trigger.accordion-trigger-all").removeClass("open")
} else {
$(".accordion .accordion-trigger.accordion-trigger-all h3").html("Close All")
$(".accordion .accordion-trigger.accordion-trigger-all").addClass("open")
}
}
toggleAll()
//
$(".accordion .accordion-trigger.accordion-trigger-all:not(.open)").on('click', function() {
$(".accordion .accordion-trigger.accordion-trigger-single:not(.open) + .skill-container").slideDown()
$(".accordion .accordion-trigger.accordion-trigger-single:not(.open)").toggleClass("open")
$(".accordion .accordion-trigger.accordion-trigger-all.open h3").html("Close All")
$(".accordion .accordion-trigger.accordion-trigger-all").addClass("open")
toggleAll()
})
$(".accordion .accordion-trigger-all.open").on("click", function() {
$(".accordion .accordion-trigger-single.open + .skill-container").slideUp()
$(".accordion .accordion-trigger-single.open").toggleClass("open")
$(".accordion .accordion-trigger.accordion-trigger-all h3").html("Open All")
$(".accordion .accordion-trigger.accordion-trigger-all").removeClass("open")
})
}).accordion .accordion-trigger {
cursor: pointer;
text-align: left;
width: 100%;
border: none;
color: #9CA3AF;
border-bottom: 3px solid #9CA3AF;
background-color: #F9FAFB;
}
.accordion .accordion-trigger:not(:first-of-type) {
margin-top: 30px;
}
.accordion .accordion-trigger.open {
border-bottom: #059669 3px solid;
background-color: #ECFDF5;
}
.accordion .accordion-trigger h3 {
padding: 6px;
font-weight: initial;
margin: 0;
color: #9CA3AF;
}
.accordion .accordion-trigger.open h3 {
color: #059669;
}
.accordion .skill-container * {
box-sizing: border-box;
}
.accordion .skill {
display: inline-block;
text-align: left;
color: white;
padding: 10px 0 10px 4px;
border-radius: 5px;
background-color: lightgray;
white-space: nowrap;
margin: 10px 0;
overflow: hidden;
position: relative;
z-index: 0;
width: 100%;
}
.accordion .skill::before {
content: "";
position: absolute;
background-color: #312E81;
border-radius: inherit;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
animation: animateLeft 1s ease-out;
width: var(--l);
}
.accordion .skill:nth-child(even)::before {
background-color: #374151;
}
@keyframes animateLeft {
from {
left: -100%
}
to {
left: 0
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...
</div>