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>Accordion Demo</h1>

<section role="region" aria-label="Assorted Ipsums">
  <div>
    <h2 class="collapsed">
      <button type="button" id="btnDisc01" aria-expanded="false" onclick="toggleDisclosure(this.id);" aria-controls="Disclosed01">
        <span>
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Lorem Ipsum
      </button>
    </h2>
    <div id="Disclosed01" aria-label="Content" role="region" aria-labelledby="btnDisc01 Disclosed01" tabindex="0">
      <p>
        Used in the post <a href="https://adrianroselli.com/2020/05/disclosure-widgets.html">Disclosure Widgets</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet molestie tellus. Proin ornare nisi id rhoncus ornare. In mattis vestibulum sollicitudin. Vestibulum quis nisi eget magna viverra dictum non in neque. Pellentesque vehicula ex tempor sapien laoreet, ut auctor nibh scelerisque. Aliquam dictum ultricies arcu, vitae varius sem viverra a. Aenean mattis, tellus id hendrerit sollicitudin, velit enim pulvinar lorem, nec sollicitudin mi urna a felis. Sed pretium erat risus, ullamcorper sagittis dui semper sed. Praesent ut lorem velit. Aenean tempus, sapien sit amet vehicula pretium, enim justo pretium leo, rhoncus mattis nunc nunc ut dui. Suspendisse fringilla urna sem, feugiat bibendum quam facilisis vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus suscipit congue mauris, sit amet pellentesque nulla sollicitudin eu. Vestibulum lorem diam, bibendum eu mi non, condimentum elementum arcu. Proin iaculis, risus a hendrerit condimentum, velit mi volutpat dui, vel consectetur massa ex in sem.
      </p>
      <p>
Sed ac mauris quis lectus efficitur ornare. Sed vitae lobortis dolor. Fusce in iaculis lectus. Morbi gravida lacus ut elementum feugiat. Integer vel posuere dui. Nulla eget pharetra purus. Vestibulum ultricies dui sit amet varius rhoncus. Nunc elementum ipsum id mauris volutpat commodo. Aliquam aliquet, tellus et sodales facilisis, neque urna iaculis nunc, eu maximus nibh tortor gravida neque. Aliquam nec dictum elit. Nunc elementum tortor lorem, eget malesuada lacus placerat eu.
      </p>
      <p>
Proin hendrerit condimentum suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nisi augue, pulvinar at neque ac, vulputate fringilla urna. Nullam sagittis egestas urna. Maecenas venenatis ante quis interdum iaculis. Vivamus egestas tortor non neque pulvinar lobortis. Suspendisse eget ex non orci consectetur blandit.
      </p>
      <p>
Fusce nec ultrices dui. Donec a massa at augue consequat blandit. Mauris sagittis arcu quis aliquet venenatis. Aliquam egestas mi massa, sed rutrum risus elementum ut. Donec posuere nunc in volutpat posuere. Fusce non nisi sit amet mi feugiat elementum vitae sit amet risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vehicula porttitor lorem sit amet scelerisque. Nullam fringilla euismod sem sit amet dictum. Mauris molestie feugiat cursus.
      </p>
      <p>
Curabitur tincidunt lacus ex. Sed elementum imperdiet rutrum. Nunc metus diam, convallis id volutpat at, commodo vitae quam. Integer eget sapien at mauris lacinia eleifend. Nulla suscipit sagittis enim, vel luctus magna hendrerit eu. Nullam eu posuere elit. Suspendisse ultrices ac ipsum ege
      </p>
    </div>
  </div>
  <div>
    <h2 class="collapsed">
      <button type="button" id="btnDisc02" aria-expanded="false" onclick="toggleDisclosure(this.id);" aria-controls="Disclosed02">
        <span>
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Cupcake Ipsum
      </button>
    </h2>
    <div id="Disclosed02" aria-label="Content" role="region" aria-labelledby="btnDisc02 Disclosed02" tabindex="0">
      <p>
        Used in the post <a href="https://adrianroselli.com/2020/05/disclosure-widgets.html">Disclosure Widgets</a>. Soufflé dessert toffee caramels pie chocolate bar. Dragée fruitcake cake dragée jelly beans. Carrot cake chocolate bar muffin liquorice brownie biscuit chocolate cake icing. Pastry bonbon gingerbread liquorice chupa chups. Danish croissant dragée muffin. Tiramisu bonbon pastry dessert brownie pie candy canes. Pie tiramisu jujubes lemon drops biscuit cotton candy. Chupa chups sweet roll sweet cookie ice cream gummi bears chocolate cake cotton candy carrot cake. Donut sesame snaps chocolate pastry pastry cupcake macaroon dessert. Donut macaroon sugar plum croissant chupa chups toffee. Cheesecake croissant cookie chocolate topping sweet. Pastry tart tootsie roll brownie marshmallow danish tart. Powder lemon drops cake toffee tiramisu lollipop cake fruitcake. Muffin cake sesame snaps biscuit jelly chocolate cake pie chocolate cake.
      </p>
      <p>
Tiramisu biscuit candy canes sweet roll jelly danish cake. Jelly-o lemon drops jelly-o. Gummies ice cream gummies candy canes. Marzipan pastry dragée icing brownie candy canes. Croissant bear claw apple pie jelly beans jelly-o jelly beans. Cookie liquorice jelly beans dessert croissant. Caramels pie chupa chups. Muffin danish cupcake oat cake jujubes macaroon tart. Jelly-o wafer brownie toffee. Cookie marzipan gummi bears gummies liquorice chocolate chocolate bar. Lollipop jelly beans bonbon gingerbread. Jelly sesame snaps brownie sweet sweet roll jelly beans jelly carrot cake.
      </p>
      <p>
Biscuit brownie halvah halvah cheesecake oat cake dragée. Danish bonbon wafer. Liquorice liquorice sugar plum sesame snaps caramels chupa chups tootsie roll cake. Carrot cake biscuit cupcake soufflé brownie carrot cake. Jelly beans fruitcake bonbon sesame snaps icing jelly beans gingerbread candy canes. Cake cake halvah topping gummi bears cookie pudding cupcake. Cotton candy cake chocolate liquorice chocolate cake powder. Chocolate cake candy canes chocolate bar. Dessert chupa chups jelly beans icing candy jelly beans pastry. Tart liquorice bonbon biscuit cheesecake apple pie muffin liquorice dessert. Carrot cake chocolate bar sweet gingerbread. Gummi bears sesame snaps candy toffee halvah. Muffin tiramisu liquorice icing fruitcake cupcake.
      </p>
      <p>
Jelly-o halvah wafer chocolate bar. Cake bonbon sweet roll tart jujubes. Icing gingerbread biscuit chocolate bar fruitcake cupcake bonbon icing. Lemon drops oat cake caramels croissant dessert. Wafer cookie brownie cookie fruitcake liquorice. Icing cake gummi bears candy canes sweet. Topping biscuit marzipan. Oat cake tiramisu jelly-o topping. Marzipan carrot cake gummi bears jelly-o tart sugar plum lemon drops pudding. Sweet roll pie marshmallow muffin cotton candy croissant cake. Pudding marshmallow sweet. Wafer marshmallow sugar plum cake icing muffin chocolate cake chupa chups. Ice cream liquorice candy canes.
      </p>
      <p>
Brownie sugar plum cake sesame snaps candy lollipop pudding halvah tiramisu. Pastry soufflé halvah bonbon muffin dessert marzipan. Tart candy canes wafer biscuit brownie jujubes bear claw. Bonbon halvah donut toffee pudding jujubes jelly-o sweet roll fruitcake. Candy jujubes dragée tart donut gummies chocolate bonbon. Pudding chupa chups marshmallow bear claw. Oat cake bonbon soufflé sweet roll gummi bears toffee tiramisu. Carrot cake tootsie roll icing caramels. Bear claw soufflé powder toffee sweet. Lollipop croissant icing biscuit fruitcake muffin. Carrot cake chocolate bar chupa chups sugar plum cheesecake candy cake. Gummies dragée toffee jujubes jelly gummies chocolate cake tootsie roll.
      </p>
    </div>
  </div>
  <div>
    <h2 class="collapsed">
      <button type="button" id="btnDisc03" aria-expanded="false" onclick="toggleDisclosure(this.id);" aria-controls="Disclosed03">
        <span>
          <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false">
            <path d="M70.3 13.8L40 66.3 9.7 13.8z"></path>
          </svg>
        </span>
        Hipster Ipsum (Hipsum?)
      </button>
    </h2>
    <div id="Disclosed03" aria-label="Content" role="region" aria-labelledby="btnDisc03 Disclosed03" tabindex="0">
      <p>
        Used in the post <a href="https://adrianroselli.com/2020/05/disclosure-widgets.html">Disclosure Widgets</a>. I'm baby xOXO biodiesel vaporware kombucha. 3 wolf moon fingerstache deep v vaporware cardigan, distillery yr man braid chia prism meh kale chips lumbersexual kombucha. Man braid flexitarian portland swag salvia vexillologist knausgaard bitters polaroid williamsburg gochujang small batch lyft pinterest scenester. Intelligentsia hammock pabst listicle single-origin coffee portland sriracha enamel pin.
      </p>
      <p>
Small batch kickstarter actually, raclette lomo meh chicharrones forage. Roof party trust fund jianbing lo-fi, slow-carb quinoa live-edge. Fingerstache man bun post-ironic viral, stumptown distillery live-edge woke. Williamsburg hot chicken disrupt authentic snackwave farm-to-table retro thundercats swag cardigan. Crucifix health goth master cleanse typewriter shoreditch pinterest dreamcatcher portland man bun ennui hot chicken, flexitarian mumblecore paleo swag. Brunch truffaut iPhone swag air plant shoreditch. Pour-over cray aesthetic, venmo ramps irony letterpress +1 schlitz tote bag knausgaard butcher lumbersexual heirloom.
      </p>
      <p>
Lo-fi fixie farm-to-table 90's glossier waistcoat bushwick hot chicken kombucha cred distillery dreamcatcher yuccie cliche. PBR&B truffaut kombucha, viral celiac listicle cardigan ennui migas green juice master cleanse shaman tumeric. Man bun squid waistcoat af butcher, kombucha pickled freegan semiotics venmo vegan craft beer synth. Shaman intelligentsia vape, pabst mustache art party pickled tilde bushwick heirloom put a bird on it raw denim knausgaard swag whatever.
      </p>
      <p>
Tacos franzen selvage subway tile, jianbing trust fund disrupt portland offal leggings pork belly. Typewriter vaporware XOXO raw denim. Green juice before they sold out 90's vinyl, mixtape ramps brooklyn sartorial forage gluten-free paleo glossier hot chicken art party. Yr readymade butcher, selvage locavore iPhone XOXO bushwick coloring book vegan tumeric pabst fixie retro. Blog viral everyday carry, knausgaard fam chambray roof party pork belly cloud bread iceland tumeric. Literally shabby chic man braid kogi typewriter +1 pok pok vape affogato food truck. Pour-over vice helvetica irony PBR&B fashion axe farm-to-table fanny pack artisan thundercats gastropub ethical try-hard.
      </p>
      <p>
Yr shabby chic raclette live-edge tumeric mustache paleo cronut edison bulb typewriter whatever church-key man braid hoodie. Tbh meh artisan, 3 wolf moon pok pok offal blue bottle chia pork belly. Chicharrones thundercats ramps, hexagon cloud bread fixie 8-bit. Skateboard schlitz etsy, succulents slow-carb tofu migas mlkshk sartorial 3 wolf moon. Aesthetic sustainable ramps scenester cronut. Retro portland small batch vexillologist 3 wolf moon chambray occupy offal vinyl. Pok pok ramps meditation, helvetica plaid craft beer chia narwhal master cleanse actually knausgaard neutra skateboard.
      </p>
    </div>
  </div>
</section>
!

CSS 

              
                body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
}

/* All the CSS needed to make disclosures work */

/* :has() is supported nowhere yet */
h2:has(> button[aria-expanded="false"]) + div {
  display: none;
}

/* until :has() is supported */
h2.collapsed + div {
  display: none;
}

/* END All the CSS needed to make disclosures work */

button[aria-expanded] {
  border: .1em solid #ccc;
  padding: .5em 1em .5em .5em;
  font: inherit;
  background-color: #eee;
}

button[aria-expanded] span {
  display: inline-block;
  font-size: 60%;
  color: #000;
  background-color: #00f;
  padding: 0.3em 0.2em 0 0.2em;
  border: 0.2em solid #00f;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  transform: rotate(270deg);
}

button[aria-expanded] svg {
  width: 1.25em;
  height: 1.25em;
  fill: #fff;
  transition: transform 0.25s ease-in;
  transform-origin: center 45%;
}

button[aria-expanded]:hover,
button[aria-expanded]:focus {
  background-color: #666;
  color: #fff;
  outline: none;
  border-color: #666;
}

button[aria-expanded]:hover span,
button[aria-expanded]:focus span {
  background-color: #fff;
  outline: none;
}

button[aria-expanded]:hover svg,
button[aria-expanded]:focus svg {
  fill: #00f;
}

/* Lean on programmatic state for styling */
button[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

section[role=region] {
  padding: 0;
  border: .05em solid #ccc;
}

section[role=region] > div {
  margin: 0;
}

section[role=region] h2 {
  margin: 0;
}

section[role=region] button {
  display: block;
  width: 100%;
  text-align: left;
  background: #efefef;
  border: .01em solid #ccc;
  padding: .5em .75em;
}

h2 + div {
  height: calc(70vh - 7.5em);
  overflow: auto;
  padding: .25em 1.25em;
  border: .1em solid #ddd;
  background-color: #fff;
  margin-top: -.1em;
}
!

JS 

              
                function closeAllDisclosures() {
  var openDs = document.querySelectorAll("button[aria-expanded]");
  for (var i = 0; i < openDs.length; i++) {
    if (openDs[i].getAttribute("aria-expanded") == "true") {
      openDs[i].setAttribute("aria-expanded", "false");
      openDs[i].removeAttribute("aria-readonly");
      openDs[i].parentNode.classList.add("collapsed");
    }
  }
}

function toggleDisclosure(btnID) {
  closeAllDisclosures();
  // Get the button that triggered this
  var theButton = document.getElementById(btnID);
  var btnParent = theButton.parentNode;
  // If the button is not expanded...
  if (theButton.getAttribute("aria-expanded") == "false") {
    // Now set the button to expanded
    theButton.setAttribute("aria-expanded", "true");
    theButton.setAttribute("aria-readonly", "true");
    btnParent.classList.remove("collapsed");
  // Otherwise button is not expanded...
  } else {
    // Now set the button to collapsed
    theButton.setAttribute("aria-expanded", "false");
    theButton.removeAttribute("aria-readonly");
    btnParent.classList.add("collapsed");
  }
}

toggleDisclosure('btnDisc01');
!
999px

Console