{"id":1869,"date":"2017-07-28T20:04:53","date_gmt":"2017-07-28T14:34:53","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1869"},"modified":"2026-09-08T11:41:19","modified_gmt":"2026-09-08T06:11:19","slug":"show-accordion-panels-based-drop-values","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/show-accordion-panels-based-drop-values\/","title":{"rendered":"Show the accordion panels based on drop down values"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we will explain how to <strong>show accordion panels based on the selected dropdown value<\/strong> using <strong>jQuery and Bootstrap<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The dropdown value determines how many accordion panels should be displayed. For example, selecting <strong>1<\/strong> displays one panel, selecting <strong>2<\/strong> displays two panels, and selecting <strong>3<\/strong> displays all three panels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic knowledge of HTML.<\/li>\n\n\n\n<li>Basic knowledge of jQuery.<\/li>\n\n\n\n<li>Basic knowledge of Bootstrap.<\/li>\n\n\n\n<li>A text editor or IDE.<\/li>\n\n\n\n<li>A web browser to test the implementation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Include jQuery Plugin and CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add the required jQuery and Bootstrap files:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\">&lt;\/source>\n\n&lt;source src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\">&lt;\/source>\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\"><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the Following Script<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following jQuery code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(function() {\n\n    var divs = $('#accordion > div').hide();\n\n    $(document).on('change', '#select_value', function(e) {\n\n        divs.hide().slice(0, Number(this.value)).show();\n\n    });\n\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The script initially hides the accordion panels and displays the required number of panels based on the selected dropdown value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the Following Code Inside the Body Tag<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create the dropdown and accordion panels:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select id=\"select_value\" name=\"select_value\"> \n\n  &lt;option value=\"1\">1\/option>\n\n  &lt;option value=\"2\">2&lt;\/option>\n\n  &lt;option value=\"3\">3&lt;\/option><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Add the accordion:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"panel-group\" id=\"accordion\" role=\"tablist\" aria-multiselectable=\"true\">\n\n  &lt;div class=\"panel panel-default\">\n\n    &lt;div class=\"panel-heading\" role=\"tab\" id=\"headingOne\">\n\n      &lt;h4 class=\"panel-title\">\n\n        &lt;a role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n\n          Collapsible Group Item #1\n\n        &lt;\/a>\n\n      &lt;\/h4>\n\n    &lt;\/div>\n\n    &lt;div id=\"collapseOne\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"headingOne\">\n\n      &lt;div class=\"panel-body\">\n\n        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\n\n        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,\n\n        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\n      &lt;\/div>\n\n    &lt;\/div>\n\n  &lt;\/div>\n\n  &lt;div class=\"panel panel-default\">\n\n    &lt;div class=\"panel-heading\" role=\"tab\" id=\"headingTwo\">\n\n      &lt;h4 class=\"panel-title\">\n\n        &lt;a class=\"collapsed\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n\n          Collapsible Group Item #2\n\n        &lt;\/a>\n\n      &lt;\/h4>\n\n    &lt;\/div>\n\n    &lt;div id=\"collapseTwo\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"headingTwo\">\n\n      &lt;div class=\"panel-body\">\n\n        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\n\n        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,\n\n        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\n      &lt;\/div>\n\n    &lt;\/div>\n\n  &lt;\/div>\n\n  &lt;div class=\"panel panel-default\">\n\n    &lt;div class=\"panel-heading\" role=\"tab\" id=\"headingThree\">\n\n      &lt;h4 class=\"panel-title\">\n\n        &lt;a class=\"collapsed\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\">\n\n          Collapsible Group Item #3\n\n        &lt;\/a>\n\n      &lt;\/h4>\n\n    &lt;\/div>\n\n    &lt;div id=\"collapseThree\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"headingThree\">\n\n      &lt;div class=\"panel-body\">\n\n        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\n\n        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,\n\n        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\n      &lt;\/div>\n\n    &lt;\/div>\n\n  &lt;\/div>\n\n&lt;\/div><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Display Accordion Panels Based on the Dropdown Value<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The dropdown value controls the number of accordion panels displayed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If <strong>1<\/strong> is selected, only the first accordion panel is displayed.<\/li>\n\n\n\n<li>If <strong>2<\/strong> is selected, the first two accordion panels are displayed.<\/li>\n\n\n\n<li>If <strong>3<\/strong> is selected, all three accordion panels are displayed.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The jQuery <code>slice()<\/code> function is used to select the required number of panels, while <code>hide()<\/code> and <code>show()<\/code> control their visibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Can I display more than three accordion panels?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. You can add more accordion panels and increase the corresponding dropdown values. The same jQuery logic will display the required number of panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What happens if I select 1 from the dropdown?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Only the first accordion panel will be displayed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What happens if I select 2 from the dropdown?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first two accordion panels will be displayed, while the remaining panels will stay hidden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I use this functionality without Bootstrap?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nginx and Let\u2019s Encrypt SSL with Docker:<\/strong> Learn how to configure Nginx and enable SSL using Let\u2019s Encrypt in a Docker and Ubuntu environment. <a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-install-nginx-and-lets-encrypt-ssl-with-html-docker-ubuntu-20-04\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Read the article<\/a><\/li>\n\n\n\n<li><strong>Send Email Using HTML Templates in CodeIgniter:<\/strong> Learn how to send emails using HTML templates in a CodeIgniter application. <a href=\"https:\/\/pheonixsolutions.com\/blog\/send-email-using-html-templates-codeigniter\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Read the article<\/a><\/li>\n\n\n\n<li><strong>Dynamic Dependent Dropdown List Using PHP, MySQL, and AJAX:<\/strong> Learn how to create dependent dropdown lists that dynamically load values using PHP, MySQL, and AJAX. <a href=\"https:\/\/pheonixsolutions.com\/blog\/dynamic-dependent-drop-list-using-htmlphpmysqlajax\/?utm_source=chatgpt.com\" target=\"_blank\" rel=\"noreferrer noopener\">Read the article<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to our experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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&nbsp;<a href=\"https:\/\/pheonixsolutions.com\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this post, we will explain how to show accordion panels based on the selected dropdown value using jQuery [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[350,273],"class_list":["post-1869","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-javascriptjquery","tag-php","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-u9","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1869"}],"version-history":[{"count":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1869\/revisions"}],"predecessor-version":[{"id":11527,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1869\/revisions\/11527"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}