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.

            
              <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>
            
          
!
            
              :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;
}
            
          
!
            
              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
🕑 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