Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                h1 Vertical Tabs: Smart & Responsive

section
  h4.active Who?
  ul
    li Nam de isto magna dissensio est.
    li Quis istud possit, inquit, negare?
    li Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum.
    li Sic enim censent, oportunitatis esse beate vivere.
    li Nam de isto magna dissensio est.
    li Quis istud possit, inquit, negare?
    li Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum.
    li Sic enim censent, oportunitatis esse beate vivere.
    li I need to fix this... "section" should wrap around the "ul"

  h4 What?
  ul
    li Potius inflammat, ut coercendi magis quam dedocendi esse videantur.
    li Atqui reperies, inquit, in hoc quidem pertinacem;
    li Verba tu fingas et ea dicas, quae non sentias?

  h4 Where?
  ul
    li Qui autem de summo bono dissentit de tota philosophiae ratione dissentit.
    li Sed quanta sit alias, nunc tantum possitne esse tanta.
    li An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia?

  h4 Where?
  ul
    li Omnes enim iucundum motum, quo sensus hilaretur.
    li Oratio me istius philosophi non offendit;
    li Ut pulsi recurrant?
    li Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit?
  h4 Why?
  ul
    li Et ille ridens: Video, inquit, quid agas;
    li Sed tu istuc dixti bene Latine, parum plane.
    li Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia;
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100')
$one-third = 100%/3
$two-third = $one-third * 2
$h4-height = 100%/5
clearfix()
  zoom 1
  &:after
  &:before
    content ""
    display table
  &:after
    clear both

html
  box-sizing border-box
*,
*:before,
*:after
  box-sizing border-box
html,
body
  width 100%
  font-family 'Roboto Slab', serif
  line-height 1.8em
  letter-spacing .1em
  color #fff
  background darkturquoise
  @media screen and (min-width: 600px)
    padding 0 10px
    background cornflowerblue
h1
  font-size 2em
  line-height 1.4em
  text-align center
  padding .5em

section
  clearfix()
  position relative
  height auto
  h4
    background rgba(#000,.1)
    cursor pointer
    border 1px solid rgba(#000,.2)
    border-top none
    padding 15px 20px
    &:first-child
      border-top 1px solid rgba(#000,.2)
    @media screen and (min-width: 600px)
      position relative
      width $one-third
      height $h4-height
      display block
      /* border-right 1px solid rgba(#000,.2) */
  ul
    clearfix()
    position relative
    height auto
    min-height 100%
    border 1px solid rgba(#000,.2)
    border-left none
    display none
    li
      list-style circle
    @media screen and (min-width: 600px)
      position absolute
      width $two-third
      right 0
      top 0
      padding 15px 30px
  .active
    cursor default
    border-bottom 1px solid rgba(#000,.2)
    border-right none
    @media screen and (min-width: 600px)
      background rgba(#000,0)
      border-right 1px solid rgba(#000,0)
  .active + ul
    display block
              
            
!

JS

              
                $('section h4').click(function(event) {
  event.preventDefault();
  $(this).addClass('active');
  $(this).siblings().removeClass('active');

  var ph = $(this).parent().height();
  var ch = $(this).next().height();

  if (ch > ph) {
    $(this).parent().css({
      'min-height': ch + 'px'
    });
  } else {
    $(this).parent().css({
      'height': 'auto'
    });
  }
});

function tabParentHeight() {
  var ph = $('section').height();
  var ch = $('section ul').height();
  if (ch > ph) {
    $('section').css({
      'height': ch + 'px'
    });
  } else {
    $(this).parent().css({
      'height': 'auto'
    });
  }
}

$(window).resize(function() {
  tabParentHeight();
});

$(document).resize(function() {
  tabParentHeight();
});
tabParentHeight();
              
            
!
999px

Console