Post
Ask Question

Accordion to Collapse/Expand section With/Without clicking on it

Introduction

You may have seen Accordions in various sites, where you need to fill your data in each opened Accordion. Here I am creating the same kind of Accordion that can be used to get the data from the end user. You can use this Accordion to partially save the data on each Next Button click of the Accordion. In this way you don't need to bother how to save all the data at the end that is entered from the user as the data will be saved partially.

You can also use this Accordion in such a way that the user will not be allowed to open the next Accordion without filling in the required fields for the current one. That will be explained in my next article.

Let's start creating an Accordion.

Step 1

First of all add an HTML page to your project and add the following code to create one part of the complete Accordion:

  1. <div class="slider">  
  2.         <div id="1divSection" class="SectionClass hide" style="border:1px thin black">  
  3.             <h3 class="bg-danger">Click Here to Open First Tab</h3>  
  4.             <div class="container">  
  5.                 <div class="col-lg-12 col-md-12">  
  6.                     <div class="form-group hide" id="Div1">  
  7.                         Provide Your First Name :- <input type="text" />  
  8.                         <br />  
  9.                         <br />  
  10.                         Provide Your Last Name  :- <input type="text" />  
  11.                     </div>  
  12.                 </div>  
  13.                 <div class="clearfix"></div>  
  14.                 <button type="button" class="btn btn-primary btn-lg active">Next</button>  
  15.                 <div class="clearfix"></div>  
  16.             </div>  
  17.         </div>  
  18. </div> 

The first div has the "Slider" class as the main div for doing all the work, so it will work like a container div for our Accordion.

In this main div we will be creating sections of the div to be joined to get a complete Accordion.

In the first section, you can see that I have added a <h3> tag, this tag is important because clicking on this tag will open/close the Accordions primarily. After this I have again created a div that will be the container for all the elements in which the data will be entered by the user.

At the end, I am using a button for opening/closing the Accordion along with the <h3> tag. This can help in those cases where long forms need to be filled in in each section and the user might not feel good about going up and down to open/close the Accordions.

Similarly you can add more sections to your Accordion like I have added here:

  1. <div class="slider">  
  2.         <div id="1divSection" class="SectionClass hide" style="border:1px thin black">  
  3.             <h3 class="bg-danger">Click Here to Open First Tab</h3>  
  4.             <div class="container">  
  5.                 <div class="col-lg-12 col-md-12">  
  6.                     <div class="form-group hide" id="Div1">  
  7.                         Provide Your First Name :- <input type="text" />  
  8.                         <br />  
  9.                         <br />  
  10.                         Provide Your Last Name  :- <input type="text" />  
  11.                     </div>  
  12.                 </div>  
  13.                 <div class="clearfix"></div>  
  14.                 <button type="button" class="btn btn-primary btn-lg active">Next</button>  
  15.                 <div class="clearfix"></div>  
  16.             </div>  
  17.         </div>  
  18.         <div id="2divSection" class="SectionClass hide" style="border:1px thin black">  
  19.             <h3 class="bg-danger">Cick Here to Open Second Tab</h3>  
  20.             <div class="container">  
  21.                 <div class="col-lg-12 col-md-12">  
  22.                     <div class="form-group hide" id="Div2">                          
  23.                         Provide Your Mobile Number:- <input type="text" />  
  24.                         <br />  
  25.                         <br />  
  26.                         Provide Your Email ID        :- <input type="text" />  
  27.                     </div>  
  28.                 </div>  
  29.                 <div class="clearfix"></div>  
  30.                 <button type="button" class="btn btn-primary btn-lg active">Next</button>  
  31.                 <div class="clearfix"></div>  
  32.             </div>  
  33.         </div>  
  34.         <div id="Div3" class="SectionClass hide" style="border:1px thin black">  
  35.             <h3 class="bg-danger">Cick Here to Open Third Tab</h3>  
  36.             <div class="container">  
  37.                 <div class="col-lg-12 col-md-12">  
  38.                     <div class="form-group hide" id="Div4">                          
  39.                         Provide Your Mailing Address  :- <input type="text" />  
  40.                         <br />  
  41.                         <br />  
  42.                         Provide Your Permanent Address :- <input type="text" />  
  43.                     </div>  
  44.                 </div>  
  45.                 <div class="clearfix"></div>  
  46.                 <button type="button" class="btn btn-primary btn-lg active">Next</button>  
  47.                 <div class="clearfix"></div>  
  48.             </div>  
  49.         </div>  
  50.         <div id="Div5" class="SectionClass hide" style="border:1px thin black">  
  51.             <h3 class="bg-danger">Cick Here to Open Fourth Tab</h3>  
  52.             <div class="container">  
  53.                 <div class="col-lg-12 col-md-12">  
  54.                     <div class="form-group hide" id="Div6">                          
  55.                         Provide Your Mother Name :- <input type="text" />  
  56.                         <br />  
  57.                         <br />  
  58.                         Provide Your Father Name :- <input type="text" />  
  59.                     </div>  
  60.                 </div>  
  61.                 <div class="clearfix"></div>  
  62.                 <button type="button" class="btn btn-primary btn-lg active">Next</button>                  
  63.                 <div class="clearfix"></div>  
  64.             </div>  
  65.         </div>  
  66.         <div id="Div7" class="SectionClass hide" style="border:1px thin black">  
  67.             <h3 class="bg-danger">Cick Here to Open Fifth Tab</h3>  
  68.             <div class="container">  
  69.                 <div class="col-lg-12 col-md-12">  
  70.                     <div class="form-group hide" id="Div8">                          
  71.                         Provide Your Current CTC  :- <input type="text" />  
  72.                         <br />  
  73.                         <br />  
  74.                         Provide Your Expected CTC :- <input type="text" />  
  75.                     </div>  
  76.                 </div>  
  77.                 <div class="clearfix"></div>  
  78.             </div>  
  79.         </div>  
  80.     </div> 

Step 2

Now for some hands-on work with jQuery.

First I am showing you the code that will work on a click of the <h3> tag:

  1. <script>  
  2.         $(document).ready(function () {  
  3.             $(".slider div div").show();  
  4.             setTimeout("$('.slider').children('div').children('div').slideToggle('fast');", 1000);  
  5.             $('.SectionClass:visible').first().children('div').slideToggle('fast');  
  6.             $('.slider h3').click(function () {  
  7.                 $(this).next(".container").slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");  
  8.                 $(this).toggleClass("current");  
  9.                 $(this).siblings("h3").removeClass("current");  
  10.                 return false;  
  11.             });  
  12.         });  
  13.     </script> 

By default all the sections will come close but you might want to open the first section by default for your end user so that they can start filling in the form straight away. For this, the third line of code is working that is finding the first section and making it an open condition.

After this click function for h3 tag is written, the first line in this click function is making that specific section sliding up and down both, depending on it's current position, apart from this specific section all the sections will be slid up.

The next two lines of code are for making the class toggle on this specific section and to remove that class from all the other sections.

So, now your Accordion is ready to work on the click of the <h3> tag.

But as I said, our Accordion will also work on the Next button provided at the end of each section. Therefore, just add the following code to get that done:

  1. $('.btn-primary').click(function () {  
  2.     $(this).parent().slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");  
  3.     $(this).parent().siblings().toggleClass("current");  
  4.     $(this).parent().siblings().siblings("h3").addClass("current");  
  5.     $(this).parent().siblings().parent().next().children('h3').next(".container").slideToggle("fast").parent().siblings().children(".container:visible").slideUp("fast");  
  6.     $(this).parent().siblings().parent().next().children('h3').toggleClass("current");  
  7.     $(this).parent().siblings().parent().next().children('h3').siblings("h3").removeClass("current");  
  8.     return false;  
  9. }); 

Here all the work is done in the first three lines that was done on the click of the <h3>, in other words the current section will be slid up/down and all the other sections will be slid up and their classes will also be removed.

The next three lines are important in the code because they are working for the next section to act like the current section.

In the first line, the next section is found and it'll slide up. Apart from those sections, all the others will be closed.

In the next two lines the same work is done that was done for the current section. So now our Button is working for the other section.

Now our Accordion is ready and you can run the code to see the output.

Output

On running the application you will see that the first section is opened forcefully so that you can work on it directly.

jQueryAccordion

Now you can click on any of the <h3> tags to open that specific Section and close all the others.

jQueryAccordion

If you click on the button "Next", then the next section will open and all the others will be closed.

jQueryAccordion

In my next article I'll explain how to stop the user from opening another section in the Accordion until all the details on that specific section are filled in.


Similar Articles