Read more content button/link

<div class="callout">
  <h4><strong>FOUNDATION FOR EMAILS</strong></h4>
  <p>We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time
    on other things, like building amazing products.</p>

  <button data-toggle="read-more-content" href="#">SHOW MORE <i class="fa fa-plus"></i></button>
  <div class="read-more-content" id="read-more-content" data-toggler data-animate="hinge-in-from-top slide-out-right">
    <h5>Spend Less Time Coding, Testing, and Preparing:</h5>
    <ul>
      <li>Responsive Grid for Any Layout</li>
      <li>Common UI Patterns to Build Faster</li>
      <li>Make stylish emails fast with Sass</li>
      <li>Inky: A New Templating Language</li>
      <li>The ZURB Email Stack will make you an email pro</li>
      <li>Emails that work in all of the major clients, even Outlook</li>
      <li>Inlining CSS <strike>is</strike> was a pain</li>
    </ul>
  </div>
</div>

<div class="callout">
  <h4><strong>Motion UI Animations</strong></h4>
  <p>Choose from the following classes to change the animation:</p>
  <button data-toggle="read-more" href="#">SHOW MORE <i class="fa fa-plus"></i></button>
  <div class="read-more" id="read-more" data-toggler data-animate="hinge-in-from-top spin-out">
    <h5>Spend Less Time Coding, Testing, and Preparing:</h5>
    <ul>
      <li><strong>Slide:</strong>
        <ul>
          <li><code>.slide-in-down</code></li>
          <li><code>.slide-in-left</code></li>
          <li><code>.slide-in-up</code></li>
          <li><code>.slide-in-right</code></li>
          <li><code>.slide-out-down</code></li>
          <li><code>.slide-out-left</code></li>
          <li><code>.slide-out-up</code></li>
          <li><code>.slide-out-right</code></li>
        </ul>
      </li>
      <li><strong>Fade:</strong>
        <ul>
          <li><code>.fade-in</code></li>
          <li><code>.fade-out</code></li>
        </ul>
      </li>
      <li><strong>Hinge:</strong>
        <ul>
          <li><code>.hinge-in-from-top</code></li>
          <li><code>.hinge-in-from-right</code></li>
          <li><code>.hinge-in-from-bottom</code></li>
          <li><code>.hinge-in-from-left</code></li>
          <li><code>.hinge-in-from-middle-x</code></li>
          <li><code>.hinge-in-from-middle-y</code></li>
          <li><code>.hinge-out-from-top</code></li>
          <li><code>.hinge-out-from-right</code></li>
          <li><code>.hinge-out-from-bottom</code></li>
          <li><code>.hinge-out-from-left</code></li>
          <li><code>.hinge-out-from-middle-x</code></li>
          <li><code>.hinge-out-from-middle-y</code></li>
        </ul>
      </li>
      <li><strong>Scale:</strong>
        <ul>
          <li><code>.scale-in-up</code></li>
          <li><code>.scale-in-down</code></li>
          <li><code>.scale-out-up</code></li>
          <li><code>.scale-out-down</code></li>
        </ul>
      </li>
      <li><strong>Spin:</strong>
        <ul>
          <li><code>.spin-in</code></li>
          <li><code>.spin-out</code></li>
          <li><code>.spin-in-ccw</code></li>
          <li><code>.spin-out-ccw</code></li>
        </ul>
      </li>
    </ul>
    <button data-toggle="read-more" href="#">SHOW LESS <i class="fa fa-plus"></i></button>
  </div>
</div>