Contao Accordion horizontal

The normal version for new browsers

by Andreas Burg

HTML

<div class="mod_article first last block" id="accordion-horizontal">
  <section class="ce_accordionSingle first ce_accordion ce_text block">
    <div class="toggler">A</div>
    <div class="accordion">
      <div>
        <figure class="image_container float_right" style="float:right;">
          <img width="128" alt="Fomalhaut planet" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/46/Fomalhaut_planet.jpg/128px-Fomalhaut_planet.jpg">
        </figure>
        <p>Nulla nunc felis, aliquet in tempus ac, iaculis ut neque! Nullam äincidunt, nisi feugiat vehicula lacinia, urna orci ülandit lacus, blandit trästßqöe libero lectus vitae mauris? Curabitur nec sollicitudin massa, vitae feugiat elit! Morbi dapibus tincidunt massa et dictum. Nulla facilisi. Pelßßntesque dignissim nisi eu nibh egestas, sed fermentum arcu temöus. Nulla a odio ante. Quisque eßt nisi, däctum äec metus at, pharetra tincidunt turpis.</p>
      </div>
    </div>
  </section>
  <section class="ce_accordionSingle ce_accordion ce_text block">
    <div class="toggler">B</div>
    <div class="accordion">
      <div>
        <p>Nulla nunc felis, aliquet in tempus ac, iaculis ut neque! Nullam äincidunt, nisi feugiat vehicula lacinia, urna orci ülandit lacus, blandit trästßqöe libero lectus vitae mauris? Curabitur nec sollicitudin massa, vitae feugiat elit! Morbi dapibus tincidunt massa et dictum. Nulla facilisi. Pelßßntesque dignissim nisi eu nibh egestas, sed fermentum arcu temöus. Nulla a odio ante. Quisque eßt nisi, däctum äec metus at, pharetra tincidunt turpis.</p>
      </div>
    </div>
  </section>
  <section class="ce_accordionSingle last ce_accordion ce_text block">
    <div class="toggler">C</div>
    <div class="accordion">
      <div>
        <p>Nulla nunc felis, aliquet in tempus ac, iaculis ut neque! Nullam äincidunt, nisi feugiat vehicula lacinia, urna orci ülandit lacus, blandit trästßqöe libero lectus vitae mauris? Curabitur nec sollicitudin massa, vitae feugiat elit! Morbi...

CSS

/* ... mandatory ...
-------------------------------------------------------------------------------------------------*/
.ce_accordion {
  height: 333px;
  float: left;
  overflow: hidden;
}
.toggler {
  position: absolute;
  width: 55px;
  height: 333px;
}
.accordion {
  margin-left: 55px;
}
.accordion > div {
  width: 444px;
  height: 333px;
}
/* ... mandatory ... END
-------------------------------------------------------------------------------------------------*/



/* ... recommended ...
-------------------------------------------------------------------------------------------------*/
.toggler {
  text-align: center;
  cursor: pointer;
  color: #fff;
  background-color: #333;
}
.accordion > div {
  padding: 20px;
  -moz-box-sizing: border-box;
  box-sizing:      border-box;
}
/* ... recommended ... END
-------------------------------------------------------------------------------------------------*/



/* ... custom ...
-------------------------------------------------------------------------------------------------*/
.toggler {
  line-height: 333px;
  background: linear-gradient(to right, #222 1%, #666 25%, #111 100%);
  font-family: Arial, 'Trebuchet MS', sans-serif;
  font-size: 1.125rem;
  font-weight: bold;
}
.accordion {
  background: #eee;
}
/* ... custom ... END
-------------------------------------------------------------------------------------------------*/
p {
  margin: 0 0 1em;
}
.float_left {
  margin: 0 1em 0.15em 0;
}
.float_right {
  margin: 0 0 0.15em 1em;
}

JavaScript

new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
  display: 0,
  opacity: false,
  alwaysHide: false,
  width: true,
  height: false,
  fixedWidth: 444,
  onActive: function(tog, el) {
    el.setProperty('aria-hidden', 'false');
    tog.addClass('active');
    tog.getNext('div').fade('in');
    tog.setProperty('aria-expanded', 'true');
    return false;
  },
  onBackground: function(tog, el) {
    el.setProperty('aria-hidden', 'true');
    tog.removeClass('active');
    tog.getNext('div').fade('out');
    tog.setProperty('aria-expanded', 'false');
    return false;
  }
});
$$('div.toggler').each(function(el) {
  el.setProperty('role', 'tab');
  el.setProperty('tabindex', 0);
  el.addEvents({
    'keypress': function(event) {
      if (event.code == 13) {
        this.fireEvent('click');
      }
    },
    'focus': function() {
      this.addClass('hover');
    },
    'blur': function() {
      this.removeClass('hover');
    },
    'mouseenter': function() {
      this.addClass('hover');
    },
    'mouseleave': function() {
      this.removeClass('hover');
    }
  });
});
$$('div.ce_accordion').each(function(el) {
  el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
  el.setProperty('role', 'tabpanel');
});