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

              
                <div class="responsive-content">
  <h2>Animated full width &lt;details&gt; &lt;summary&gt;</h2>
  <p>Proof of concept. How the html5 <i>&lt;details&gt; &lt;summary&gt;</i> -element can be styled and used as an expandable section for full width horizontal scrolling content when placed inside a responsive max-width container. Done without the need of
    javaScript, only using some nifty html and css.</p>

  <details>
    <summary>
      <span>Click to expand</span>
      <i class="fas fa-chevron-right arrow"></i>
    </summary>
    <div class="full-width-horizontal-scroll">
      <img src="https://placekitten.com/300/200" class="horizontal-image" />
      <img src="https://placekitten.com/250/200" class="horizontal-image" />
      <img src="https://placekitten.com/320/200" class="horizontal-image" />
      <img src="https://placekitten.com/350/200" class="horizontal-image" />
      <img src="https://placekitten.com/303/200" class="horizontal-image" />
      <img src="https://placekitten.com/410/200" class="horizontal-image" />
    </div>
  </details>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet feugiat lorem nec accumsan. Quisque pellentesque diam dignissim nulla scelerisque viverra. Morbi semper euismod iaculis. Aliquam suscipit magna ut tortor sollicitudin, ut pellentesque
    velit aliquam. Curabitur ut dapibus metus. Duis varius nunc sit amet hendrerit varius. Aliquam lacinia euismod leo, eget feugiat nibh laoreet vel. Sed mattis iaculis tellus eu cursus. Ut non augue id augue placerat venenatis. Proin in est mattis,
    aliquet risus ac, placerat felis. Donec hendrerit magna finibus, pellentesque urna vitae, dignissim ligula. Nam fringilla, ipsum et egestas volutpat, nisi lacus lacinia lorem, vel tincidunt nisl orci vel nisl. Donec fringilla lobortis lacus, et rutrum
    metus convallis in. Duis cursus ipsum molestie aliquam vestibulum. Ut in ullamcorper leo, vel aliquet nibh. Pellentesque at vehicula ligula.</p>
  <p>Donec sit amet rutrum dolor. Etiam luctus, diam sed consequat tincidunt, metus elit condimentum diam, non elementum ante sapien a augue. Praesent non diam bibendum, bibendum leo eu, ullamcorper augue. Nunc in lorem in purus laoreet venenatis. Curabitur
    lacus quam, porta vel maximus a, ultrices quis felis. Nulla facilisi. Vestibulum sagittis vulputate nunc vitae ultrices. Mauris posuere, purus non vulputate malesuada, quam turpis pellentesque lorem, sed imperdiet diam augue vel nisi. Aliquam dictum
    sapien vel enim fermentum ornare.</p>
  <p>Vivamus ultricies nisi eu nisi ullamcorper mollis. Vivamus congue lacus in tempor mattis. Pellentesque a egestas nibh, vel dignissim lectus. Proin interdum massa eget lorem blandit, sit amet faucibus leo lobortis. In ac ante vel erat accumsan sagittis
    at sit amet lorem. Mauris interdum, mi in suscipit pharetra, sem leo varius nunc, quis posuere est lorem eget nulla. Integer non leo aliquet, interdum mi ac, vestibulum odio. Donec quis leo magna. Mauris urna nulla, aliquam sed rutrum a, sodales sit
    amet tortor.</p>
  <div>
              
            
!

CSS

              
                /* variables used in concept */

$content-width: 32em;
$view-width: 100vw;
$content-auto-margin: calc((#{$view-width} - #{$content-width}) / 2);
$inner-padding: 1em;


/* fonts - not part of concept */

body {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: 34px;
  line-height: 40px;
  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: $content-width + ($inner-padding * 2)) {
  h2 {
    font-size: 45px;
    line-height: 48px;
  }
}


/* Actual concept CSS */

.responsive-content {
  margin: 1em auto;
  max-width: $content-width;
  padding: $inner-padding;
}

details {
  margin: 2em 0;
  padding-bottom: 0em;
  transition: padding-bottom 600ms cubic-bezier(0, 1.02, 0.38, 0.97);
  transition-property: padding-bottom;

  summary {
    cursor: pointer;

    &:hover {
      span {
        text-decoration: underline;
      }
    }

    &:focus {
      outline: none;
    }

    &::-webkit-details-marker {
      display: none;
    }

    .arrow {
      transition: transform 0.3s;
      margin-left: 0.5rem;
    }
  }

  &[open] {
    padding-bottom: 5em;

    summary {
      .arrow {
        transform: rotate(-90deg);
      }
    }
  }
}

.full-width-horizontal-scroll {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-left: -$inner-padding;
  margin-right: -$inner-padding;
  margin-bottom: -5em;
  margin-top: 1em;

  *:first-child {
    margin-left: $view-width;
    animation: slide-small 0.8s forwards cubic-bezier(0.24, 1.28, 0.39, 0.99);
  }
}

.horizontal-image {
  display: inline-block;
  margin: 0.5em;
}

@media only screen and (min-width: $content-width + ($inner-padding * 2)) {
  .full-width-horizontal-scroll {
    margin-right: calc(#{$content-auto-margin} * -1);
    margin-left: calc(#{$content-auto-margin} * -1);

    *:first-child {
      animation-name: slide-big;
    }
  }
}

@keyframes slide-big {
  100% {
    margin-left: $content-auto-margin;
  }
}

@keyframes slide-small {
  100% {
    margin-left: $inner-padding;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console