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">⇅</span></dt><dd>text</dd>
<dt>heading <span style="float:right">⇅</span></dt>
<dd>text.</dd>
<dt>heading<span style="float:right">⇅</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">&udarr;</span></dt> <dd> <dl class="faqs1"> <dt>sub heading <span style="float:right">&udarr;</span></dt> <dd>text</dd> <dt>sub heading <span style="float:right">&udarr;</span></dt> <dd>text.</dd> <dt>sub heading <span style="float:right">&udarr;</span></dt> <dd>text</dd> </dl> </dd> <dt>second heading <span style="float:right">&udarr;</span></dt> <dd> <dl class="faqs1"> <dt>sub heading <span style="float:right">&udarr;</span></dt> <dd>text</dd> <dt>sub heading <span style="float:right">&udarr;</span></dt> <dd>text.</dd> <dt>sub heading <span style="float:right">&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>