12/22/2014 - 8:30 PM

UL Tabs to Dropdown with Select Functionality

UL Tabs to Dropdown with Select Functionality

    var newSelection = '';
    $('.tabs-select span').click(function(){
    $(".tabs-select ul li a").click(function(){
        } else {
            $(".tabs-select li a").removeClass("current");
            var portfolioItems = $('.tabs-select ul li a.current').text();
			var activeTab = $(this).attr("href"); //Find the rel attribute value to identify the active tab + content
            $('.tabs-select > span').html(portfolioItems);
			$(".tab-content").hide(); //Hide all tab content
            $(activeTab).fadeIn(); //Fade in the active content
        return false;
    $('a[href="' + $(location).attr('hash') + '"]').trigger('click');
<nav class="tabs-select">
    <span>View All</span>
    <ul class="">
        <li><a href="#">View All</a></li>
        <li><a href="#test1">Apparel</a></li>
        <li><a href="#test2">Glassware</a></li>
        <li><a href="#test3">Bar Gear</a></li>
        <li><a href="#">Tap Handles</a></li>
        <li><a href="#">Odds &amp; Ends</a></li>
        <li><a href="#">Gift Cards</a></li>

<div class="tab-container">
    <div class="tab-content" id="test1">1</div>
    <div class="tab-content" id="test2">2</div>
    <div class="tab-content" id="test3">3</div>
/*tab styling*/

    .tabs-select ul li { float: left; padding: 0 10px; }

/*select  styling*/

    .tabs-select { height: 40px; border: 1px solid #f00; position: relative; z-index: 1;  }
    .tabs-select span { line-height: 40px; display: block; padding: 0 10px; }
    .tabs-select ul { position: absolute; background: #f00; display: none; width: 100%; }
    .tabs-select.open ul { display: block;  }