Tiggles ツ
12/18/2019 - 2:45 AM

Convert Top Tabbed Content into dropdown for mobile

need to restyle top tabbed content for a mobile experience? this will make your tabs a dropdown for mobile.

ie http://cloud.madebyspeak.com/07541b

$(".nav-tabs-top").each(function () {
    var eachTab = $(this).find('li.tabbedcontent-header');
    
    // create the dropdown
    $("<div class='mobile-dropdown'><select /></div>").prependTo($(this));
    
    // add dropdown options for all the tabs
    for (i = 0; i < eachTab.length; i++) {
      var tabName = $(eachTab[i]).find('a').text().trim(),
        tabLink = $(eachTab[i]).find('a').attr('href').substr(1);
      $('<option value=' + tabLink + '>' + tabName + '</option>').appendTo($(this).find('.mobile-dropdown select'));      
    }
    
    // make the change function for our new dropdown
    jQ171(this).find('.mobile-dropdown select').on('change', function () {
      var matchingContent = $('.tab-content').find('div[id=' + $(this).val() + ']');
      $('.tab-content .tab-pane').removeClass('active');
      $(matchingContent).addClass('active');
    });

  });
.mobile-dropdown {
    @media (min-width: 768px) {
      display: none;
    }
  }
  ul.nav-tabs {
    @media (max-width: 767px) {
      display: none;
    }
  }