css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  <section class="links-underlined">
  <h1>Responsive Tabs (v1.1)</h1>
  <p>This is my implementation of responsive tabs. It is being incorporated into my <a href="https://github.com/aaronpinero/typography">Tyfy framework</a>.</p>
  <p>I've seen implementations of responsive tabs, but I've never been particularly happy with them. The transitions in this version feel more comfortable. I have also considered the problem of linking to specific tabs and to anchor links within tabs.</p>
  <p>Test links to:</p>
  <ul>
    <li><a href="#anchor">An anchor in the second tab</a></li>
    <li><a href="#Donec Scelerisque">The third tab</a></li>
    </ul>
  </section>
  <section class="demo">
 			<div class="tabs-container">
				<h2 class="tab-label">Lorem Ipsum</h2>
				<p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>
				<p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>
				<h2 class="tab-label collapsed">Dolor Sit Amet</h2>
        <p>Facilis error corrupti dolor eaque. <a id="anchor">Occaecati</a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>
				<p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>
				<h2 class="tab-label collapsed">Donec Scelerisque</h2>
				<p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
			</div>
  <h2>Notes</h2>
  <p>I've relied on CSS Flexbox for the visual tabs. Flexbox is <a href="https://caniuse.com/#search=flex">a problem for just about any version of Internet <strike>Exploder</strike> Explorer</a>. At some point, I'll need to figure out an alternative way to present the tabs that will work for IE.</p>
  </section>
</body>
            
          
!
            
              body {
  padding-bottom:1.625rem;
}
section {
  margin:0 auto;
  max-width:55rem;
  padding:1.625rem;
  &.demo {
    border: 2px dashed #e6e6e6;
    border-radius: .8125rem;
    box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
    margin-top: 1.625rem
  }
}
            
          
!
            
              $(document).ready(function(){
  
  GoToAnchor = function(){
    // find the anchor and any tab it might be in
    selected_anchor_name = encodeURIComponent(window.location.hash.substring(1));
		selected_anchor = $('a[name="'+selected_anchor_name+'"], a[id="'+selected_anchor_name+'"]');
    parent_tab = selected_anchor.parents('.tab-panel');
    // account for an anchor in a label
    parent_label = selected_anchor.parents('.tab-label');
    if (parent_label.length) {
      parent_tab = parent_label.next('.tab-panel');
    }
    // do the steps of this function only if we have an anchor link and a tab panel
    if (selected_anchor.length && parent_tab.length) {
      parent_tab_label = parent_tab.prev('.tab-label');
		  parent_tab_index = parent_tab_label.attr('data-tabindex');
      parent_tab.parent().find('ul.tabs li').eq(parent_tab_index).click();
      if (parent_tab.hasClass('collapsed')) {
        parent_tab.removeClass('collapsed');
        parent_tab_label.removeClass('collapsed');
      }
      // scroll to the anchor
      var s = selected_anchor.offset().top - 50; // console.log(s);
      $('body,html').animate({'scrollTop':s},500,'swing');
		}
  };
  
  // prepare HTML structure for each tab container
  $('.tabs-container').each(function(){
    if (!$(this).hasClass('tabs-processed')) {
      // find the headings that are tab labels
      my_tablabels = $(this).find('.tab-label');
      // create tabs
      if ($(this).find('ul.tabs').length === 0) {
        $(this).prepend('<ul class="tabs"></ul>');
        var x;
        for (x=0;x<my_tablabels.length;x++) {
          $(this).find('ul.tabs').append('<li data-tabindex="'+x+'">'+my_tablabels.eq(x).text()+'</li>');
        }
      }
      // structure all labels and wrap all tab panels
      if ($(this).find('.tab-panel').length === 0) {
        my_tablabels.each(function(i){
          $(this).attr('data-tabindex',i);
          $(this).wrapInner('<a id="'+encodeURIComponent($(this).text())+'"></a>');
          kids = $(this).nextUntil('.tab-label').wrapAll('<div class="tab-panel"></div>');
          // default state class for when tabs are collapsable sections
          $(this).addClass('collapsed').next('.tab-panel').addClass('collapsed');
        });    
      }
      // open initial tab
      $(this).find('ul.tabs li').eq(0).addClass('open');
      my_tablabels.eq(0).addClass('open').next('.tab-panel').addClass('open');
      // tab click events
      $('.tabs-container ul.tabs li').each(function(i){
        $(this).click(function(){
          if (!$(this).hasClass('open')) {
            $('.tabs-container .open').removeClass('open');
            my_tabindex = $(this).attr('data-tabindex');
            $(this).addClass('open');
            $('.tabs-container .tab-label').eq(my_tabindex).addClass('open');
            $('.tabs-container .tab-panel').eq(my_tabindex).addClass('open');
          }
        });
      });
      // collapsable header click event
      $('.tabs-container .tab-label').click(function(){
        if (!$(this).hasClass('transition')) {
          kids = $(this).next('.tab-panel');
          kids.removeClass('collapsed');
          var fullHeight = kids.outerHeight();
          $(this).addClass('transition');
          kids.addClass('transition');

          if ($(this).hasClass('collapsed')) {
            kids.css({'height':'0px','padding-bottom':'0px','padding-top':'0px'}).animate({
              height:fullHeight+'px',
              paddingBottom:'32px',
              paddingTop:'16px',
            },500,function(){
              $('.tabs-container .transition').removeClass('collapsed').removeClass('transition').removeAttr('style');
            });
          }
          else {
            kids.css('height',fullHeight+'px').animate({
              height:'0px',
              paddingBottom:'0px',
              paddingTop:'0px',
            },500,function(){
              $('.tabs-container .transition').addClass('collapsed').removeClass('transition').removeAttr('style');
            });
          }
        }
      }); 
      // indicate state of readiness
      $(this).addClass('tabs-processed');
    }  
  });
  // if there are tabs and someone has linked to an anchor inside a tab
  console.log(window.location.hash);
  if (window.location.hash != '') {
    GoToAnchor();
  }
  // handle case when page is already loaded
  $(window).on('hashchange',function(){
    GoToAnchor();
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console