Cacher is the code snippet organizer for pro developers

    var newSelection = '';
    $('.tabs-select span').click(function(){
        $(this).parent().toggleClass('open');
    })
    $(".tabs-select ul li a").click(function(){
        if($(this).hasClass('current')){
        } else {
            $(".tabs-select li a").removeClass("current");
            $(this).addClass("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
            $(this).parent().parent('ul').removeClass('open');
            $('.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>
    </ul>
</nav>

<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>
</div>

/*tab styling*/

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


/*MEDIA QUERY*/
/*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;  }