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">⇅</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>