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 class="accordion" data-background="https://hibr.com/wp-content/uploads/2018/02/rich_accord_02.jpg" style="background-image: url(&quot;https://hibr.com/wp-content/uploads/2018/02/rich_accord_03.jpg&quot;);">
<article class="section" data-background="https://hibr.com/wp-content/uploads/2018/02/rich_accord_02.jpg">
  <span class="close">
      <span class="cross">
      <span class="a"></span>
      <span class="b"></span>
      </span>
    </span>
<h2 class="heading"><span class="above">DESIGN FOR ATHLETES</span>The Froning Effect<span class="below">+</span></h2>
<div class="inside-content">
<h3>This Mattress Packs Some Serious Technology For The Best Recovery</h3>
When designing a mattress for the best in the world, we needed to think outside the box. We focused on muscle recovery through better blood circulation, joint alignment and positioning by creating new materials and cognitive performance through temperature regulation and comfort. 

</div>
</article>
<article class="section" data-background="https://hibr.com/wp-content/uploads/2018/02/rich_accord_04.jpg">
<span class="close">
      <span class="cross">
      <span class="a"></span>
      <span class="b"></span>
      </span>
    </span>
<h2 class="heading"><span class="above">ALL DAY ENERGY</span>Better Performance<span class="below">+</span></h2>
<div class="inside-content">
<h3>When Your Muscles Recovery Faster You Can Train Harder</h3>
Why is Rich eating blueberries? He loves blueberries and we captured this image of him fueling up for the day after getting a greats night’s sleep. We wanted to design a mattress that allowed you to train hard and recovery fast - and the technology packed into this mattress does just that.

</div>
</article>
<article class="section" data-background="https://hibr.com/wp-content/uploads/2018/02/rich_accord_05.jpg">
  <span class="close">
      <span class="cross">
      <span class="a"></span>
      <span class="b"></span>
      </span>
    </span>
<h2 class="heading"><span class="above">TECHNOLOGY</span>A Game Changer<span class="below">+</span></h2>
<div class="inside-content">
<h3>Higher Quality &amp; Better Performance Means You Get A Better Bed</h3>
Our team has developed some of the most technologically advanced materials ever created for a mattress. We set out with a goal of creating the best mattress for Rich and in turn developed the most advanced mattress anyone has ever seen. It is supportive, comfortable and affordable.

</div>
</article><article class="section" data-background="https://hibr.com/wp-content/uploads/2018/02/rich_accord_03.jpg">
  <span class="close">
      <span class="cross">
      <span class="a"></span>
      <span class="b"></span>
      </span>
    </span>
<h2 class="heading"><span class="above">SHIPS TO YOUR DOOR</span>Hassle Free<span class="below">+</span></h2>
<div class="inside-content">
<h3>Free Shipping, 100 Night Sleep Trial &amp; Free Returns</h3>
It wasn't too long ago that you had to strap a mattress to the roof of your car. We're all glad those days are over, and you no longer need to worry about buyers remorse. If for any reason you don’t love your HIBR we'll pick it up and refund your money.

</div>
</article>
</div>
              
            
!

CSS

              
                *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.accordion * {
  transition: all .3s ease 0s; }

.accordion {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 80vh;
  min-height: 700px;
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
  transition: 0.1s ease background; }

.section {
  flex: initial;
  width: 25%;
  height: 100%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  box-sizing: border-box;
  padding: 2vh 1vw;
  position: relative;
  cursor: pointer;
  border-right: 1px solid #fff;
  transition: 1.2s ease all; }

.accordion .section:last-of-type {
  border-right: none; }

.section .heading {
  transition: 0.5s ease all; }

.section:hover .heading {
  margin-top: -30px; }

div.enabled article {
  flex: initial;
  width: 4%; }

.section.open {
  width: 88%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=1 );
  /* IE6-9 */
  cursor: default; }

.inside-content {
  opacity: 0;
  transition: opacity .3s ease 0; }

.section.open > .inside-content {
  opacity: 1;
  transition: opacity .3s ease .3s; }

/* navigation */
.heading {
  top: 300px;
  position: absolute;
  width: 70%;
  max-width: 100%;
  margin: 0;
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 200;
  text-align: left;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.3; }

.heading .above {
  font-size: 13px;
  font-weight: 400;
  display: block;
  margin-bottom: 5px; }

.heading .below {
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  margin-top: 15px;
  text-align: center;
  line-height: 33px;
  border-radius: 100%;
  font-size: 30px; }

.accordion.enabled .section:not(.open) {
  background: rgba(0, 0, 0, 0.1); }

.accordion.enabled .section:not(.open) h2.heading {
  top: 25px;
  left: 13%;
  text-align: left;
  font-size: 15px;
  width: 400px;
  height: 400px;
  transform-origin: 0px 0px 0px;
  transform: matrix(0, 1, -1, 0, 27, 0);
  white-space: nowrap;
  line-height: 1; }

.accordion.enabled .section:not(.open) h2.heading .above,
.accordion.enabled .section:not(.open) h2.heading .below {
  display: none; }

.accordion.enabled .section.open h2.heading .below {
  display: none; }

.accordion.enabled .section.open h2.heading {
  padding-left: 25px;
  max-width: 450px; }

.accordion.enabled .section:hover {
  background: rgba(0, 0, 0, 0.4); }

.accordion.enabled .section:hover .heading {
  margin-top: -5px; }

.accordion.enabled .section.open:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+100 */
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=1 );
  /* IE6-9 */ }

.accordion:not(.enabled) .section:hover {
  background: rgba(0, 0, 0, 0.2); }
  .accordion:not(.enabled) .section:hover .heading .below {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg); }

@media screen and (min-width: 768px) {
  .accordion.enabled .section.open h2.heading {
    font-size: 45px;
    top: 230px; } }

/* Article layouts */
.inside-content {
  text-align: left;
  width: 475px;
  padding-left: 25px;
  max-width: 80%;
  position: absolute;
  top: 390px;
  line-height: 1.4; }

.inside-content p,
.inside-content h2,
.inside-content h3 {
  margin: 0 0 1em 0; }

.close {
  display: none;
  z-index: 300;
  width: 40px;
  height: 40px;
  border-radius: 24px;
  border: 2px solid #FFF;
  cursor: pointer;
  transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);
  position: absolute;
  left: 50%;
  cursor: pointer; }

.close .cross {
  position: absolute;
  left: 18px;
  top: 18px; }

.close .a {
  position: absolute;
  width: 14px;
  height: 2px;
  background-color: #FFF;
  left: -7px;
  top: -1px; }

.close .b {
  position: absolute;
  width: 2px;
  height: 14px;
  background-color: #FFF;
  left: -1px;
  top: -7px; }

.section.open .close {
  display: block; }

@media (max-width: 900px) {
  .section {
    padding: 2vh 3vw; }
  .heading {
    transform: rotate(90deg);
    min-width: 100vh;
    text-align: left;
    transform-origin: 0 0 0;
    opacity: 1;
    top: 10vh;
    font-size: 22px;
    width: auto;
    left: 61%; }
  .heading .above,
  .heading .below {
    display: none; }
  .accordion.enabled .section.open h2.heading {
    transform: none;
    width: 95%;
    min-width: 200px;
    max-width: 95%;
    left: 0;
    top: 20%; }
  .inside-content {
    max-height: calc(72%);
    overflow-y: auto;
    left: 0;
    top: 30%; } }

@media (max-width: 640px) {
  .accordion.enabled .section:not(.open) {
    width: 12%;
    padding: 3px; } }
              
            
!

JS

              
                jQuery(document).ready(function($){

// HIBR LITE Accordion
  // On load, add the background image
  var aBgimage = $('.accordion').data('background');
	$('.accordion').css('background-image', 'url('+aBgimage+')');
  
  
  $('.section').on('click', function(e){
    
    if( $(this).hasClass('open') ){
    
      e.stopPropagation();
      $('.accordion').removeClass('enabled')
      $('.section').removeClass('open')
    
    } else {
      
      $(this).parent('.accordion').addClass('enabled')
      $(this).addClass('open')
      $(this).siblings('.section').removeClass('open')
    
      var bGimage = $(this).data('background')
      $('.accordion').css('background-image', 'url('+bGimage+')');
      
    }
    
     
  })
  
  $('.close').on('click', function(e){
    e.stopPropagation();
    $('.accordion').removeClass('enabled')
    $('.section').removeClass('open')
  })
  
  
})
              
            
!
999px

Console