Myujth

I have a list of anchor links that successfully fades in and out tab content on click.

I need to convert this list into a select drop-down at mobile and I'm not sure how to go about updating the current setup to function the same way except the list would be in drop-down format.

Is there a simple way to do this?

Here is a JSFiddle

JS:

$("#customer-content .group").hide(); // Initially hide all content
$("#customer-tabs li:first").attr("id","current"); // Activate first tab
$("#customer-content .group:first").fadeIn(); // Show first tab content

$('#customer-tabs li a').click(function(e) 
 e.preventDefault();
 if ($(this).attr("id") == "current") //detection for current tab
 return 
 
 else 
 $("#customer-content .group").hide(); //Hide all content
 $("#customer-tabs li").attr("id",""); //Reset id's
 $(this).parent().attr("id","current"); // Activate this
 $($(this).attr('href')).fadeIn(); // Show content for current tab
 
);

HTML

<ul id="customer-tabs" class="cs-tabs">
 <li><a href="#link-1">Link 1</a></li>
 <li><a href="#link-2">Link 2</a></li>
 <li><a href="#link-3">Link 3</a></li>
</ul>

<div id="customer-content">
 <div class="group" id="link-1">
 <h2>Title</h2>
 <div class="customer-accordion">
 Content
 </div>
 </div>
 <div class="group" id="link-2">
 <h2>Title 2</h2>
 <div class="customer-accordion">
 Content 2
 </div>
 </div>
 <div class="group" id="link-3">
 <h2>Title 3</h2>
 <div class="customer-accordion">
 Content 3
 </div>
 </div>
</div>

You can find relevant .group by index, So use .index() to finding index of selected option and use .eq() to select .group by index.

$("#customer-content .group").hide().first().fadeIn();
$('#customer-tabs').change(function(e) 
 var i = $(this).find(":selected").index();
 $("#customer-content .group").hide().eq(i).fadeIn(); 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="customer-tabs">
 <option selected>Link 1</option>
 <option>Link 2</option>
 <option>Link 3</option>
</select>
<div id="customer-content">
 <div class="group" id="link-1">
 <h2>Title</h2>
 <div class="customer-accordion">
 Content
 </div>
 </div>
 <div class="group" id="link-2">
 <h2>Title 2</h2>
 <div class="customer-accordion">
 Content 2
 </div>
 </div>
 <div class="group" id="link-3">
 <h2>Title 3</h2>
 <div class="customer-accordion">
 Content 3
 </div>
 </div>
</div>