Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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>Browsers</h1>
<ul class="browsers accordion" data-bindable="accordion" data-behavior="checkbox">
  <li>
    <h2>Google Chrome</h2>
    <p>Cray cardigan butcher lomo banjo disrupt. Gluten-free direct trade sartorial salvia vinyl seitan, Vice narwhal. Cosby sweater Schlitz dreamcatcher, four loko retro aesthetic deep v craft beer meh Echo Park High Life master cleanse ethnic. Locavore vinyl typewriter, quinoa fanny pack kitsch wolf occupy butcher street art sartorial deep v intelligentsia. Terry Richardson banjo direct trade typewriter. Schlitz Vice vegan, helvetica +1 fingerstache tousled Cosby sweater post-ironic Echo Park iPhone pug occupy kale chips stumptown. Gastropub raw denim mustache, letterpress Cosby sweater artisan sustainable helvetica swag narwhal sriracha single-origin coffee pour-over.</p>
  </li>
  <li>
    <h2>Mozilla Firefox</h2>
    <p>Shoreditch McSweeney's banjo american apparel, Schlitz mixtape mumblecore hoodie master cleanse quinoa keytar ethical 8-bit. Food truck gastropub meggings pork belly next level. Wayfarers squid vegan, pop-up skateboard fap art party street art. Aesthetic before they sold out intelligentsia post-ironic next level, Tonx pitchfork 8-bit. Roof party pug cray, thundercats aesthetic stumptown small batch Austin Tonx master cleanse twee shoreditch street art wolf artisan. Forage Williamsburg mixtape, you probably haven't heard of them meh cray art party craft beer High Life. Street art narwhal swag hashtag polaroid, vinyl Brooklyn direct trade yr Carles leggings.</p>
  </li>  
  <li>
    <h2>Apple Safari</h2>
    <p>Next level keffiyeh kitsch High Life Marfa, swag banh mi letterpress narwhal plaid. Ethical hashtag cardigan blue bottle DIY. Try-hard Godard PBR chambray. Quinoa intelligentsia thundercats small batch shoreditch Carles typewriter umami 90's. Etsy occupy church-key Portland Pinterest pork belly. Fingerstache raw denim retro vegan Terry Richardson. Ethical Carles put a bird on it, pour-over leggings fanny pack hoodie Tonx selfies Portland.</p>
  </li>  
  <li>
    <h2>Microsoft Internet Explorer</h2>
    <p>Authentic letterpress literally, ethnic salvia readymade occupy +1 art party fashion axe. Typewriter Terry Richardson Wes Anderson, High Life craft beer flexitarian leggings viral cornhole VHS tattooed lomo. Yr sriracha whatever, cardigan gentrify cliche church-key shabby chic fingerstache pop-up. Farm-to-table High Life authentic mustache, vegan meggings small batch Portland keffiyeh food truck. Forage chambray +1, next level mumblecore ethical Bushwick VHS Schlitz direct trade. DIY tattooed fashion axe, tousled Schlitz hella cray viral. Echo Park pour-over selfies craft beer ennui keytar.</p>
  </li>  
</ul>

<h1>The Web Team</h1>
<ul class="web-team accordian" data-bindable="accordion" data-toggle="on">
  <li>
    <h2>Alex Nikdel</h2>
    <p>Etsy fanny pack roof party, selfies church-key McSweeney's kitsch hella beard occupy tattooed food truck. Brunch Schlitz pug McSweeney's gluten-free, whatever small batch fixie. Pork belly cardigan sustainable, selvage +1 wolf sriracha dreamcatcher occupy forage. Tote bag quinoa direct trade retro, cornhole Tonx Marfa master cleanse. Jean shorts squid umami, cardigan mixtape american apparel beard cliche meggings. Retro tofu vinyl biodiesel tattooed Terry Richardson, cardigan kitsch PBR small batch +1 trust fund hella yr. Intelligentsia Banksy aesthetic, thundercats occupy pour-over you probably haven't heard of them chillwave YOLO quinoa.</p>
  </li>
  <li>
    <h2>Seth Wilson</h2>
    <p>Etsy pork belly fixie, Pinterest Banksy meh YOLO synth small batch banh mi +1 ethnic. Pickled kitsch PBR, church-key ethical gentrify street art chillwave salvia fap tousled chambray Terry Richardson. Hashtag Odd Future art party, tousled master cleanse flexitarian cliche post-ironic Wes Anderson. Echo Park swag beard Wes Anderson quinoa, sriracha cliche. Cred butcher Neutra mumblecore banh mi lo-fi. Gentrify bespoke Schlitz, Wes Anderson Neutra street art pug. Vice Schlitz yr, photo booth ethnic keytar fashion axe.</p>
  </li>  
  <li>
    <h2>Glenn Welser</h2>
    <p>Meggings occupy Truffaut, mumblecore retro blog Banksy flannel cliche kogi squid pug cardigan Schlitz. Asymmetrical Pinterest roof party High Life ethnic twee. Pork belly irony authentic, bespoke semiotics gluten-free flannel. Jean shorts fanny pack butcher locavore, pop-up PBR Banksy tumblr viral Terry Richardson. Selvage ugh flexitarian, hella freegan meh pug single-origin coffee lo-fi. Sriracha Pinterest pork belly, actually salvia fixie gentrify deep v selfies small batch. Skateboard bitters letterpress, cardigan tattooed deep v trust fund fanny pack.</p>
  </li>  
  <li>
    <h2>Josh Nederveld</h2>
    <p>Ennui flannel tattooed, Neutra cred vegan High Life blue bottle ethical +1 cray. Truffaut kitsch four loko, craft beer mumblecore art party fap tofu sriracha farm-to-table pickled sartorial. Quinoa pork belly put a bird on it, try-hard artisan fixie beard. Flexitarian intelligentsia sriracha cardigan freegan, swag 90's pop-up. Vegan gastropub flexitarian Brooklyn kale chips american apparel, polaroid Marfa selvage aesthetic locavore +1 Terry Richardson Truffaut biodiesel. Williamsburg freegan banjo letterpress, ugh skateboard Austin kitsch farm-to-table single-origin coffee. Bespoke gastropub chillwave Terry Richardson, Marfa mumblecore skateboard VHS.</p>
  </li>  
  <li>
    <h2>Taylor Gorman</h2>
    <p>Pour-over farm-to-table pop-up, craft beer seitan tousled letterpress biodiesel 90's Godard. Chambray blog Terry Richardson Bushwick tote bag master cleanse, twee sartorial Echo Park. Messenger bag fap salvia, keytar ennui 90's tousled jean shorts wolf ethnic Truffaut raw denim 8-bit occupy. Ugh jean shorts Brooklyn scenester locavore flexitarian, lo-fi put a bird on it. Sriracha readymade vinyl, mixtape mustache shabby chic leggings butcher before they sold out iPhone banjo. Trust fund sriracha Neutra, squid kale chips raw denim fixie Cosby sweater single-origin coffee pickled readymade photo booth disrupt mixtape. Mixtape artisan jean shorts, beard master cleanse 90's whatever squid organic PBR.</p>
  </li>  
  <li>
    <h2>Chris Roche</h2>
    <p>IPhone ethical scenester mustache authentic keffiyeh, master cleanse four loko. Raw denim leggings fap, fixie yr Truffaut quinoa ethnic stumptown Godard +1 brunch gastropub. Church-key literally deep v, street art synth cornhole chambray gastropub McSweeney's small batch Marfa. Synth PBR lo-fi semiotics, +1 readymade 90's beard Banksy Brooklyn tumblr stumptown bitters. Swag blue bottle artisan semiotics. Helvetica put a bird on it kogi chambray scenester, craft beer leggings letterpress. Ugh scenester brunch meggings.</p>
  </li>  
</ul>
!

CSS 

              
                @import "compass/css3";

@import "compass/css3";

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 1em;
  font-weight: 500;
  background: #65bad4;
}
h1 { 
  font-size: 3em; 
  font-weight: 900;
  color: white;
}
h2 { 
  font-size: 1.5em; 
  font-weight: 700;
  margin: .5em 0;
  cursor: pointer;
  background: rgba(0,0,0,.1);
  padding: .5em;
}
ul {
  margin: 1em 0 2em;
}
p {
  @include transition(max-height, .25s);
  
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  padding: 0 1em;

  .on &, .active & { 
    @include transition(max-height, .5s);
    max-height: 200px;  
  }
}
!

JS 

              
                #******************************************************************************
# BINDABLE
#******************************************************************************
class Bindable

  #----------------------------------------------------------------------------
  # CLASS REGISTRATION
  #----------------------------------------------------------------------------

  ###*
   * Registers a class with the utility to be bound on elements with the 
   * specified key.
   * @param  {string} key   The key used to link DOM elements to the class
   * @param  {class}  klass The class bound to elements with the given key
   * @return null
  ###
  @register: (key, klass) ->
    @registry ?= {}
    @registry[key] = {class: klass}
    return null


  ###*
   * Gets the registered class associated with a key, if one exists
   * @param  {string} key The key of the class
   * @return {class}      The class associated with key, else null
  ###
  @getClass: (key) ->
    @registry[key]?.class


  #----------------------------------------------------------------------------
  # ELEMENT BINDING
  #----------------------------------------------------------------------------
  
  ###*
   * Binds an element with the class associated with its key
   * @param  {HtmlElement} el               The DOM element that will be bound to
   * @param  {string}      dataKey=@dataKey The attribute on the element containing the key
   * @return this
  ###
  bind: (el, dataKey=@dataKey) ->
    el = $(el)
    key = el.data(dataKey)
    if _class = @constructor.getClass(key)
      el.data(@instanceKey, new _class(el)) unless el.data(@instanceKey)
    else
      console?.error "Bindable for key: #{key} not found in Bindable.registry for instance", el
    @

  ###*
   * Binds all DOM elements of this instance with their associated classes
   * @return this
  ###
  bindAll: ->
    @bind(el) for el in @bindables
    @


  #----------------------------------------------------------------------------
  # LIFECYCLE
  #----------------------------------------------------------------------------

  ###*
   * Creates a new Bindable instance with associated context and dataKey
   * @param {jQuery Object} context=$('body')  Where to search for bindable elements
   * @param {string}        dataKey='bindable' The data attribute to bind against
  ###
  constructor: (context=$('body'), @dataKey='bindable')->
    @bindables = $("[data-#{@dataKey}]", context)
    @instanceKey = "#{@dataKey}-instance"


  ###*
   * Gets all the bindable objects on the page for this instance
   * @return {array} Instances of the bindable classes applied to the page
  ###
  getRefs: ->
    $(bindable).data(@instanceKey) for bindable in @bindables


  ###*
   * Cleans up all bound objects (memory management)
   * @return this
  ###
  dispose: ->
    for bindable in @bindables
      bindable = $(bindable)
      if instance = bindable.data(@instanceKey)
        instance.release() if typeof instance?.release is 'function'
        instance.dispose() if typeof instance?.dispose is 'function'
        bindable.data(@instanceKey, null)

    delete @bindables
    @bindables = []
    @


  ###*
   * @deprecated
  ###
  release: ->
    @dispose()
    
#******************************************************************************
# ACCORDION
#******************************************************************************

class Accordion

  constructor: (@el) ->
    @applyOptions()
    @eventBindings()

  applyOptions: ->
    defaults = {
      toggle: 'active'
      behavior: 'radio'
    }
    @options = $.extend defaults, @el.data()

  eventBindings: ->
    that = this
    @el.on 'click', 'li', -> that.toggle $ this

  toggle: (item) ->
    if @options.behavior == 'radio'
      @el.children('li').removeClass @options.toggle 
    item.toggleClass @options.toggle

Bindable.register 'accordion', Accordion

#******************************************************************************
# APPLICATION
#******************************************************************************

new Bindable().bindAll()
!
999px

Console