how to slidetoggle divs

Question

I have year as category and months as subcategory. Now when I click the Year I need month to slidedown and when I click specific year month of other year should be hidden.

here is my code:

<div class="archiveevnt">
<h2 class="subhead3">2012</h2>
<ul class="event1">
<li>Feb</li>
<li>Mar</li>
</ul>
</div>
<div class="archiveevnt">
<h2 class="subhead3">2013</h2>
<ul class="event1">
<li>Jan</li>
<li>Feb</li>
<li>Mar</li>
</ul>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('h2.subhead3').next('ul.event1').slideToggle();
        $('h2.subhead3').click(function(){
            $('h2.subhead3').next('ul.event1').slideUp();
            $(this).next('ul.event1').slideToggle();
            return false;
        })
    })
</script>

My problem is when i Click year month slidedown and now when i again click the same year month doesn't slideup.Thanks for any help or suggestions.

Answer 1

You need to remove below extra line of code.

$(this).next('ul.event1').slideUp();

Below is the complete working code

$(document).ready(function(){ $('h2.subhead3').next('ul.event1').slideToggle(); $('h2.subhead3').click(function(){ $(this).next('ul.event1').slideToggle(); return false; }) })

Answer 2

You just need to replace this line of code:

$('h2.subhead3').next('ul.event1').slideUp();

with this:

$('h2.subhead3').not(this).next('ul.event1').slideUp();

• $('h2.subhead3').not(this) will select all the subhead3 year elements except the element clicked in the current scope.
• Also since you were using slideUp on all the subhead3 year elements and then the slideToggle for the current element. It resulted in the behaviour where clicking the same year month doesn't slideup, but slideup and then again down.

FIDDLE DEMO