CODEWITHSUNDEEP
jquery
pheromix
pheromix

Reputation: 19317

How to close an accordion content when re-clicking the accordionbutton?

There is a JQuery accordion :

<script type="text/javascript" >

    $(document).ready(function() {

        $('div.accordionButton').click(function() {
            $('div.accordionContent').slideUp('slow');  
            $(this).next().slideDown('slow');
        });
        $("div.accordionContent").hide();

    });

</script>

When I first click an object div "accordionButton" then its sub-content is shown by slide. How to hide this sub-content by re-clicking the object div "accordionButton" ?

Upvotes: 0

Views: 362

Answers (2)

Jai
Jai

Reputation: 74738

Hi Try this one very compact,

$(function(){
   $(".accordionButton").click(function(){
      $(this).next(".accordionContent").slideToggle();
   });
});

Please check the fiddle:

http://jsfiddle.net/jaiprakashsah/9zw6b/1/

​

Upvotes: 2

Code Spy
Code Spy

Reputation: 9964

It Works !

$(document).ready(function() {

    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('slow');  
        if(!$(this).next().is(':visible')){
        $(this).next().slideDown('slow');
        }
    });
    $("div.accordionContent").hide();


});​

http://jsfiddle.net/ipsjolly/m4BTd/

Updated Fiddle:-

http://jsfiddle.net/ipsjolly/m4BTd/1/

Upvotes: 1

Related Questions