expanding text

Could probably use p.expanding for this with a span that's hidden, but that would be limited to inline content.

note

In case javascript is disabled:

<noscript>please allow javascript on clickforafrica.org to enable this feature</noscript>

Replacing the faq plug-ins.

html:

 <div class="faq-wrapper">
    <dl class="faqs">
    <dt>heading <span style="float:right">&udarr;</span></dt>

<dd>text</dd>

<dt>heading <span style="float:right">&udarr;</span></dt>

<dd>text.</dd>

<dt>heading<span style="float:right">&udarr;</span></dt>

<dd>text</dd>

</dl>

</div>
<!-- only for nested dl -->
<div class="faq-wrapper">
    <dl class="faqs">
      <dt>first heading <span style="float:right">&amp;udarr;</span></dt>
      <dd>
        <dl class="faqs1">
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text</dd>
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text.</dd>
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text</dd>
        </dl>
      </dd>
      <dt>second heading <span style="float:right">&amp;udarr;</span></dt>
      <dd>
        <dl class="faqs1">
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text</dd>
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text.</dd>
          <dt>sub heading <span style="float:right">&amp;udarr;</span></dt>
          <dd>text</dd>
        </dl>
      </dd>
    </dl>
  </div>
<!-- end nested dl -->

css:

<style type="text/css">
.faq-wrapper {
  margin: 25px 0;
}
 
dl {
  line-height: 170%;
  margin-bottom: 20px;
}
 
dl, dt, dd {
  margin: 0;
  padding: 0;
}
 
.faqs dt {
  font-weight: 700;
  background: #efefef;
  position: relative;
  padding: 6px 14px;
  margin: 15px 0;
  border-radius: 4px;
}
/* for nested dl               */
 .faqs1 dt {
  background: #f4f4f4;
}
/* end of nested dl        */
.faqs dd {
  display: none;
}
 
.faqs dd {
  padding: 0 0 15px 7px;
}
 
.faqs .hover {
  cursor: pointer;
}
</style>

javascript:

<script>
  jQuery(document).ready(function($) {
    $('.faqs dd').hide(); // Hide all DDs inside .faqs
    $('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
        // Add class "hover" on dt when hover
        $(this).next().slideToggle(150); // Toggle dd when the respective dt is clicked
    });
  });
</script>