Expanders

The expander button allows for specific information to collapse or expand in the viewer. The expander wrapper class is defaulted as a white background for the header and a grey background for the body. The inverse option generates a grey background for the header and a white background for the body. The content of the body has to be added and edited through HTML.

Presentation

expanders

Example

expanders-example

HTML

<div class=“expander-wrapper “>
  <p class=“expander-link arrow-controls closed” data-expandable=“#expandable-1”><strong>1.</strong> Horace must <u>have heard (1)</u> us talking, because he began to walk toward us.</p>
  <ol>
    <li>NO CHANGE</li>
    <li>have heard of</li>
    <li>of heard about</li>
    <li>of heard</li>
  </ol>
  <div class=“expander-content” id=“expandable-1” style=“display: none;”>
    <p><strong>Solution: The correct answer is A. </strong> It is correct to use the past perfect form of the verb &ldquo;to hear,&rdquo; which is &ldquo;heard.&rdquo; It
    is a common mistake to say &ldquo;must of,&rdquo; because the written contraction &ldquo;must&rsquo;ve&rdquo; (&ldquo;must have&rdquo;) sounds like &ldquo;must of&rdquo; in spoken English. However, this is never correct.</p>
  </div>
</div>