<section class="main">
  <header class="title">
    Flexible accordian with psuedo element indicators
  </header>
  <section>
      <button>
        Open
      </button>
    <header>
      Open Me, Please.
    </header>
    <div>
      <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nemo harum voluptas aliquid rem possimus nostrum excepturi!
      </article>
    </div>
  </section>
  <section>
    <button>
        Open
    </button>
    <header>
      Or me...
    </header>
    <div>
      <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Qui explicabo soluta deleniti vel?</li>
          <li>Esse aperiam unde quam cupiditate!</li>
          <li>Laboriosam magnam neque cumque. Nisi.</li>
          <li>Doloremque eum quibusdam sit incidunt.</li>
        </ul>
      </article>
    </div>
  </section>
    <section>
      <button>
        Open
      </button>
    <header>
      You could open <i>me</i> up.
    </header>
    <div>
      <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore maxime perspiciatis amet nemo harum voluptas aliquid rem possimus nostrum excepturi! Tempore maxime perspiciatis amet nemo harum voluptas aliquid rem possimus nostrum excepturi!
      </article>
    </div>
  </section>
  <section>
    <button>
        Open
    </button>
    <header>
      Definitely click on me though.
    </header>
    <div>
      <article class="special">
        <img src="http://media.giphy.com/media/hUldButOAGC64/giphy.gif" alt="" />
<h3>Happy Holidays, CodePen!</h3>
      </article>
    </div>
  </section>
</section>
* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  background: limegreen;
}

section {
  position: relative;
  width: 100%;
}
section.main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  max-width: 30em;
  min-width: 15em;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  overflow: hidden;
}
section.main > header {
  color: #fff;
  background: #1e7b1e;
  text-align: center;
  font-weight: 700;
  line-height: 1.2em;
}
section > section {
  border-bottom: 1px solid #d6f5d6;
}
section > section:last-child {
  border: none;
}
section > div {
  height: 0;
  overflow: hidden;
  transition: all .2s ease-in;
}
section button {
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0;
  height: 3em;
  width: 3em;
  outline: 0;
  border: 0;
  background: none;
  text-indent: -9999%;
  pointer-events: none;
}
section button:after, section button:before {
  content: '';
  display: block;
  position: absolute;
  height: 12px;
  width: 4px;
  border-radius: .3em;
  background: limegreen;
  transform-origin: 50%;
  top: 50%;
  left: 50%;
  transition: all .3s ease-in-out;
}
section button:after {
  transform: translate(-75%, -50%) rotate(-45deg);
}
section button:before {
  transform: translate(75%, -50%) rotate(45deg);
}
section.open button:after, section.open button:before {
  height: 14px;
  background: #28a428;
}
section.open button:after {
  transform: translate(0%, -50%) rotate(45deg);
}
section.open button:before {
  transform: translate(0%, -50%) rotate(-45deg);
}
section.open header {
  color: #555;
}

article,
header {
  padding: 1em;
  line-height: 1em;
}

header:not(.title) {
  width: 100%;
  overflow: hidden;
  height: 3em;
  background: white;
  cursor: pointer;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 2.1em;
}
header:not(.title):hover {
  background: #ebfaeb;
}

article {
  line-height: 1.4em;
  font-size: .9em;
  background: rgba(255, 255, 255, 0.7);
}
article img {
  width: 100%;
  height: auto;
  border: 5px solid white;
  border-radius: 3px;
}
article.special h3 {
  margin: .35em 0 0 0;
  color: #239023;
  text-align: center;
}
View Compiled
$(document).ready(function(){
  
  $('header').not('.title').on('click', function(){
    
    var that = $(this),
        parent = that.parent(),
        closeDiv = that.siblings('div'),
        contentHeight = closeDiv.children('article').outerHeight();
    
    that.parents('section').first().toggleClass('open');
    (closeDiv.height() === 0) ? closeDiv.height(contentHeight) : closeDiv.height(contentHeight).height(0);
    
    closeDiv.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
      function(e) {
        var that = $(this);
        (that.css('height') !== '0px') ? that.css('height','auto') : that.css('height', '0px' );
      });
  });
  
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js