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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div window>
  <div class="main">
    <h1>Fruits</h1>
    <details>
      <summary>Apple</summary>
      <div class="detail-body">
        <p>
          Lorem Ipsum is simply dummy text of the 
          printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy 
          text ever since the 1500s, when an unknown 
          printer took a galley of type and scrambled 
          it to make a type specimen book. It has survived 
          not only five centuries, but also the leap into 
          electronic typesetting, remaining essentially 
          unchanged. 
       </p>
      </div>
    </details>
    <details>
      <summary>Banana</summary>
      <div class="detail-body">
        <p>
          The standard chunk of Lorem Ipsum used since 
          the 1500s is reproduced below for those interested.
          Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum 
          et Malorum" by Cicero are also reproduced in their 
          exact original form, accompanied by English versions 
          from the 1914 translation by H. Rackham. The first line 
          of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
          comes from a line in section 1.10.32.
        </p>
      </div>
    </details>
    <details>
      <summary>Pear</summary>
      <div class="detail-body">
        <p>
          It is a long established fact that a reader will be 
          distracted by the readable content of a page when 
          looking at its layout. The point of using Lorem 
          Ipsum is that it has a more-or-less normal 
          distribution of letters, as opposed to using 
          Content here, content here', making it look like 
          readable English. Many desktop publishing packages 
          and web page editors now use Lorem Ipsum as their  
          default model text, and a search for 'lorem ipsum' 
          will uncover many web sites still in their infancy.
        </p>
      </div>
    </details>
    <details>
      <summary>Orange</summary>
      <div class="detail-body">
        <p>
          Contrary to popular belief, Lorem Ipsum is not 
          simply random text. It has roots in a piece of 
          classical Latin literature from 45 BC, making 
          it over 2000 years old. Richard McClintock, 
          a Latin professor at Hampden-Sydney College 
          in Virginia, looked up one of the more obscure 
          Latin words, consectetur.
        </p>
      </div>
    </details>
  </div>
</div>
              
            
!

CSS

              
                :root {
  --w: 20em; 
  --easing: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media screen and (max-height: 35em) {
  :root {
    --w: 50vh;  
  }  
}

html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

[window] {
  width: var(--w);
  height: calc(var(--w) *1.6);
  min-width: 15em;
  min-height: 20em;
  position: relative;

  /* just for demo */
  background: #444;
  box-shadow: 0 0 20px rgba(125, 125, 125, .2);
  overflow: hidden;
}

@keyframes slide-in {
  0% { transform: translate3d(10%, 10%, 0); }
  100% { transform: translate3d(1em, 1em, 0); }
}

@keyframes clip-in {
  from {
    transform: translate3d(1em, 100%, 0);
    -webkit-clip-path: polygon(0 0, -10% 0, -10% 100%, 0 100%);
            clip-path: polygon(0 0, -10% 0, -10% 100%, 0 100%);
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
  }
}

.main {
  z-index: 9;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%; height: 100%;
  background: #fff;
  transition: .4s var(--easing); 
}

.main h1 {
  margin: -2em 0 1em 0;
  min-width: 68%;
}

.main[open] {
  transform: scale(.9) translate3d(-.5em, -.5em, 0);
}

.main details {
  display: block;
  width: 68%;
}

.main details + details {
  margin-top: 5px;
}

.main details summary {
  padding: .5em 1em;
  background: #fafafa;
  color: #333;
  cursor: pointer;
  transition: .4s var(--easing); 
  outline: none;
}

.main details:not([open]) summary:focus {
  box-shadow: inset 0 0 0 1px #9bdeff;
  color: #000;
}

.main details summary::-webkit-details-marker {
  opacity: .5;
}

.main details:not([open]):hover summary::-webkit-details-marker,
.main details:not([open]) summary:focus::-webkit-details-marker,
.main details[open] summary::-webkit-details-marker {
  opacity: 1;
}

.main details:not([open]):hover summary {
  background: #E3F5FE;
  color: #000;
}

.main details[open] summary {
  background: #E3F5FE;
  animation: clip-in .3s;
  animation-fill-mode: both;
  min-width: 61.8%;
  will-change: transform;
}

.main details summary ~ .detail-body {
  display: flex;
  flex-direction: column;
  padding: 4em 2em 2em;
  background: #fff;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  box-shadow: 0 0 20px rgba(125, 125, 125, .5);
  animation: slide-in .6s var(--easing); 
  animation-fill-mode: both;
  will-change: transform;
  z-index: 10;
  overflow: auto;
}

.main details summary ~ .detail-body p {
  line-height: 1.6;
  margin-top: 2em;
}

.main details[open] summary {
  position: absolute;
  z-index: 99;
  top: 1em;
  left: 1em;
}
              
            
!

JS

              
                const main = document.querySelector('.main');
main && main.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() == 'summary') {
    if (e.target.parentNode.open) {
      main.removeAttribute('open');
    } else {
      main.setAttribute('open', true);
    }
  }
});
              
            
!
999px

Console