I've been facing some challenges putting together this jquery functionality. My original idea was to create a toggle effect for the archive's years and months. For example, when I click on a YEAR, it should toggle down to display all MONTHS, and when I click on a MONTH, it should toggle down to show the links below. The toggle action should be specific to the clicked link.
However, the issue I encountered was with the formatting of the jquery script. I intended for the years and months to trigger a "slideDown" or toggle effect, but when I clicked on a month, it toggled all the months instead of just one.
If it helps, you can access the code on JSFiddle here.
https://i.sstatic.net/pDyKS.jpg
Thank you in advance.
$('.years span').click(function() {
$('.years').addClass('active');
$('.months').show(); });
$('.months span').click(function() {
$('.months').toggleClass('active');
$('.months').find('ul').slideToggle(); });
$('.months a').click(function() {
$('.months').addClass('active');
$('.months ul').show(); });.year-name p{
display: inline;
}
.year-name {
display: inline;
}
.month-name p{
display: inline;
}
.month-name {
display: inline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-posts">
<ul>
<div class="archive-post y2019"><span class="year-name">2019 <p></p></span>
<ul>
<li class="month month-10"><span class="month-name">October <p></p>
</span>
<a href="">Return</a>
</li>
<li class="month month-9"><span class="month-name">September <p></p>
</span>
<a href="">Help</a>
<a href="">Hello</a>
</li>
</ul>
</div>
<br><br>
<div class="archive-post y2018"><span class="year-name">2018 <p></p></span>
<ul>
<li class="month month_9"><span class="month-name">July <p></p>
</span>
<a href="">A Kind Gesture</a>
</li>
</ul>
</div>
</ul>
</div>