A Pen by Mac Bleser.

index.html

<div class="collapsable collapsed">
  
  <h3 class="collapsable--header">Collapsable Header</h3>
  <div class="collapsable--content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum maiores iusto ipsam cumque voluptate neque sed doloribus dicta temporibus officiis incidunt ad.</p>
    <p>Est laboriosam fugiat soluta numquam rem placeat dolor possimus quos nihil eveniet ad debitis sapiente incidunt aspernatur voluptatem molestiae quibusdam ipsam eius consectetur asperiores architecto molestias in dicta dolorum fugit eos doloremque blanditiis dolores quasi ab reprehenderit optio accusamus repudiandae natus ea sit perferendis velit exercitationem aliquid accusantium non explicabo nam temporibus quisquam illum suscipit animi quae consequatur!</p>
  </div>
  
  
</div>

script.js

(function ($) {

  if($('.collapsable').length) {
        
        $('.collapsable').find('.collapsable--header').click(function(){
          $(this).parent().toggleClass('collapsed');
        })
      }
  
})(jQuery);

Simple-Collapsable-Content.markdown

Simple Collapsable Content

A Pen by Mac Bleser on CodePen.

License.

style.scss

@import "compass";
$light-gray: #e1e1e1;
$red: #d62c1f;

@mixin collapsable {
  
  max-width: 640px;
  min-width: 320px;
  margin: 20px auto;

  & .collapsable--header {
    font-weight: bold;
    font-style: normal;
    font-color: #214391;
    line-height: 1.4;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    text-rendering: optimizeLegibility;
    font-size: 1.75em;
    line-height: 1.4;
    color: inherit;
    font-weight: 300;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    background-color: $light-gray;
    line-height: 50px;
    margin: 0;
    padding: 0 20px;
    cursor: pointer;

    &:after {
      content: '–';
      float: right;
      width: 25px;
      height: 25px;
      background-color: $red;
      color: rgba(255,255,255,0.8);
      line-height: 22px;
      text-align: center;
      margin-top: 12px;
      border-radius: 50%;
      font-weight: lighter;
    }
  }
  
  .collapsable--content {
    padding: 20px;
    border: 1px solid $light-gray;
    border-top: 0;
  }
  

  &.collapsed {
    .collapsable--header:after {
      content: '+';
      line-height: 21px;
    }
    .collapsable--content {
      display: none;
    }
  }
}

.collapsable {
  @include collapsable;
}