Show/Hide the accordion tabs based on the user selection of selectbox option.
HTML
<div class="selectbox">
<label>Select Fruit:</label>
<select id="fruit-types">
<option>--Select Fruit--</option>
<option value="all">All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grapes">Grapes</option>
<option value="pineapple">Pine apple</option>
<option value="guava">Guava</option>
</select>
</div>
Script
$(document).ready(function() {
$(".fruit-section .panel-collapse").removeClass("in");
$("#fruit-types").change(function() {
var fruit = $(this).val();
if (fruit == "all") {
$(".panel .panel-collapse").addClass("in");
console.log("ALL");
} else if (fruit == "Apple") {
$(".panel .panel-collapse").removeClass("in");
$(".apple .panel-collapse").addClass("in");
console.log("Apple");
} else if (fruit == "Orange") {
$(".panel .panel-collapse").removeClass("in");
$(".orange .panel-collapse").addClass("in");
console.log("Orange");
} else if (fruit == "Grapes") {
$(".panel .panel-collapse").removeClass("in");
$(".grapes .panel-collapse").addClass("in");
console.log("Grapes");
} else if (fruit == "Pine apple") {
$(".panel .panel-collapse").removeClass("in");
$(".pineapple .panel-collapse").addClass("in");
console.log("Pine apple");
}else if (fruit == "Guava") {
$(".panel .panel-collapse").removeClass("in");
$(".guava .panel-collapse").addClass("in");
console.log("Guava");
}
});
});
Demo
See the Pen Show/Hide accordion tabs based on selectbox value selection by vinothkumar rajendran (@vinoth102) on CodePen.