Create Collapsible Content Using Jquery UI

We can create collapsible content quite easily by using Jquery UI Accordion plugin First download and add jquery ui support in your page .
Here is the code to create sample collapsible content .First the html code :

<div id="content">
</div>
<input type="button" value='Submit' id='submit'></input>

Now write below code in your script tag which uses jquery ui to make and display collapsible content. When user clicks on submit button, this method will be called which will add content to the content div. Whatever you add in h1 tag will become the title of collapsible content and the content will be written in p tag.You can customize the appearance of your collapsible content. For example , if you don't want to show any content , unless user clicks on it , then set active variable as false in accordion method.Similarly , the heightStyle option create content which will have auto scroll functionality. You can read all the methods and options Here.

$(document).ready(function(){
     $("#submit").click(function () {
              
$( "#content").html('<h1>Content Title</h1><p>Collapsible Content which will be shown once user clicks on the Content Title</p>');
 $( "#content" ).accordion({
                collapsible: true,
                active:false}
           );
         
         
     });
});

Now when you run this , if you click on the button first time , it works fine. you see a button with Content Title and collapsible content , but when you click the button second time , it is not working .The reason behind this behavior is jquery do not clean up objects it created. So we have to clear contents and also clean up collapsible functionality. For this , we need to use destroy functionality provided in accordion . Here's the code :

$(document).ready(function(){
     $("#submit").click(function () {
     var resVar = $( "#content").find('h1');
     if(resVar.length == 1 )
     {
         alert('destroying');
         $( "#content" ).accordion("destroy");
         $( "#content" ).empty();
     }
         
$( "#content").html('<h1>Res Header</h1><p>sdsdd</p>');
 $( "#content" ).accordion({
                collapsible: true,
                active:false}
           );
         
         
     });
});

Now it works fine. So if you are using ajax call or using jquery to fill in the details in accordion components , make sure to clean up every time . You can see the running output Here

Post Comments and Suggestions !!