Introduction
In this post, we will explain how to show accordion panels based on the selected dropdown value using jQuery and Bootstrap.
The dropdown value determines how many accordion panels should be displayed. For example, selecting 1 displays one panel, selecting 2 displays two panels, and selecting 3 displays all three panels.
Prerequisites
- Basic knowledge of HTML.
- Basic knowledge of jQuery.
- Basic knowledge of Bootstrap.
- A text editor or IDE.
- A web browser to test the implementation.
Implementation
Step 1: Include jQuery Plugin and CSS
Add the required jQuery and Bootstrap files:
<source src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></source> <source src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></source> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Step 2: Add the Following Script
Add the following jQuery code:
$(function() {
var divs = $('#accordion > div').hide();
$(document).on('change', '#select_value', function(e) {
divs.hide().slice(0, Number(this.value)).show();
});
});
The script initially hides the accordion panels and displays the required number of panels based on the selected dropdown value.
Step 3: Add the Following Code Inside the Body Tag
Create the dropdown and accordion panels:
<select id="select_value" name="select_value"> <option value="1">1/option> <option value="2">2</option> <option value="3">3</option>
Add the accordion:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Step 4: Display Accordion Panels Based on the Dropdown Value
The dropdown value controls the number of accordion panels displayed.
- If 1 is selected, only the first accordion panel is displayed.
- If 2 is selected, the first two accordion panels are displayed.
- If 3 is selected, all three accordion panels are displayed.
The jQuery slice() function is used to select the required number of panels, while hide() and show() control their visibility.
Conclusion
Using jQuery with Bootstrap makes it simple to dynamically control the visibility of accordion panels. Based on the selected dropdown value, the required number of panels can be displayed without reloading the page.
FAQs
Can I display more than three accordion panels?
Yes. You can add more accordion panels and increase the corresponding dropdown values. The same jQuery logic will display the required number of panels.
What happens if I select 1 from the dropdown?
Only the first accordion panel will be displayed.
What happens if I select 2 from the dropdown?
The first two accordion panels will be displayed, while the remaining panels will stay hidden.
Can I use this functionality without Bootstrap?
Yes. The show and hide functionality can be implemented using jQuery alone, but Bootstrap provides the accordion styling and collapse functionality used in this example.
Related Articles
- Nginx and Let’s Encrypt SSL with Docker: Learn how to configure Nginx and enable SSL using Let’s Encrypt in a Docker and Ubuntu environment. Read the article
- Send Email Using HTML Templates in CodeIgniter: Learn how to send emails using HTML templates in a CodeIgniter application. Read the article
- Dynamic Dependent Dropdown List Using PHP, MySQL, and AJAX: Learn how to create dependent dropdown lists that dynamically load values using PHP, MySQL, and AJAX. Read the article
Talk to our experts
Looking for the right technology solution for your business? Our team of experts can help you with development, cloud, DevOps, design, and a wide range of other technology needs. Get in touch with our team here.