I created a customized Accordion based on a code snippet I found online to incorporate into my project, but unfortunately, it's not functioning as expected. Currently, it is displaying the address of the high school and failing to hide it when the page loads or collapse the description when the links are clicked. Despite carefully checking for errors such as typos in the classes, I have been unable to resolve the issue.
HTML
<ul class="linkLocation">
<li class="linkHover is-active">
<a href="#mapTX" class="linkThumb"> Austin, TX</a>
<p class="accordion-panel">
<address style="font-style: normal;">
High School 1<br>
1234 Congress Ave<br>
Austin, TX 75087
</address></p>
</li>
<li class="linkHover">
<a href="#mapLA" class="linkThumb"> Shreveport, LA</a>
<p class="accordion-panel">
<address style="font-style: normal;">
High School 2<br>
1234 Congress Ave<br>
Shreveport, LA 75087
</address></p>
</li>
</ul>
CSS
.linkThumb {
margin: 0;
padding: .8rem 0;
cursor: pointer;
font-weight: normal;
&::before {
content: '';
display: inline-block;
height: 7px;
width: 7px;
margin-right: 1rem;
margin-left: .5rem;
vertical-align: middle;
transform: rotate(-45deg);
transition: transform .2s ease-out;
}
}
.accordion-panel {
margin: 0;
padding-bottom: .8rem;
display: none;
}
.linkHover.is-active {
.linkThumb::before {
transform: rotate(45deg);
}
}
JS
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".linkLocation > .linkHover.is-active").children(".accordion-panel").slideDown();
$(".linkLocation > .linkHover").click(function() {
// Cancel the siblings
$(this).siblings(".linkHover").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
Here is the non-functional code - JSFIDDLE