Maintain open tab/collapse when using responsivetabs-js and html5 history api On Boostrap 3 page

Vote count:

0

I am using a a Jquery plugin called responsivetabs-js (link to github:http://ift.tt/1pZmEVl) to convert tab content to collapse content in sm and xs width browsers (Bootstrap3). I am also using an HTML5 history script to remember active tabbing history and update the URL. When narrowing the screen to an sm or xs width, the tabs convert to collapse regions perfectly maintaining the appropriate opened tab (now collapse) content. My problem occurs in when I select a collapse region (formally tab) in the now smaller browser window the tab history in the browser is not updated, so when returning the window to larger width where the collapse regions return to tab regions, the active content displayed is last selected tab, rather than the last selected collapse region.

This is the history script I'm using. I'm imagining that if i can modify this script to update the URL on data-toggle="tab" OR data-toggle="collapse" that it might solve my problem, but I'm not quite sure how to achieve that. I'm still getting my sea legs with query and am a little stumped right here. Help would be uber appreciated.

/*Enable History tabbing through HTML5 history API ORIG */
$(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab", a[data-toggle="collapse"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  $(window).on("popstate resize", function(e) {
   var activeTab = $('[href=' + location.hash + ']');
    var windowWidth = $(window).width();
    if (activeTab.length) {
      activeTab.tab('show');
    } else if (windowWidth < 480){
        ('.nav-tabs#slide-line-tabs a:first').tab('hide');
    } else {
        $('.nav-tabs#slide-line-tabs a:first').tab('show');
    }
  });

});

And here is an example of the tab nav I am working on

<div class="nav-wrap">
   <ul class="nav nav-tabs responsive col-md-12 col-sm-12 col-lg-12 nav-wrap " id="slide-line-tabs">
    <li class="line-tab"><a href="#tab-1" class="collapsed" data-toggle="tab">Tab 1.<span class="arrow visible-xs un-rotate"></span></a></li>
    <li class="line-tab"><a href="#tab-2" class="collapsed" data-toggle="tab">Tab 1.<span class="arrow visible-xs un-rotate"></span></a></li>
    <li class="line-tab"><a href="#tab-3" class="collapsed" data-toggle="tab">Tab 1.<span class="arrow visible-xs un-rotate"></span></a></li>
    <li class="line-tab"><a href="#tab-4" class="collapsed" data-toggle="tab">Tab 1.<span class="arrow visible-xs un-rotate"></span></a></li>
   </ul>

<!-- CONTENT AREA
================================================== --> 
<div class="tab-content responsive">

    <!-- tab1 -->
    <div class="tab-pane fade" id="tab-1" data-id="tab-1">
        <p>Content</p>
    </div><!--END tab 1-->

    <!-- tab2 -->
    <div class="tab-pane fade" id="tab-2" data-id="tab-2">
    <!-- COlUMNS -->
        <p>Content</p>
    </div><!--END tab 2-->

    <!-- tab3 -->
    <div class="tab-pane fade" id="tab-3" data-id="tab-3">
    <!-- COlUMNS -->
         <p>Content</p>
     </div><!--END tab 3-->

    <!-- tab4 -->
    <div class="tab-pane fade" id="tab-4" data-id="tab-4">
    <!-- COlUMNS -->
    <p>Content</p>
    </div><!--END tab 4-->

  </div><!-- END tab-content -->

asked 1 min ago

Andrew J O'Melia

1