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 green option (used for Richardson) generates agreen background color for the header and white 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>