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.