Expanding Text

This section is probably redundant, html has a way to do all this without bloating.

<details>
  <summary>This is the Short bit, click to expand.</summary>
  <p>And this is the longer, expanding text... pretty much anything can go in here, paragraphs, lists etc. Probably images, embeds... There is more info on <a target="_blank" href="https://www.w3schools.com/TAGS/tag_details.asp">w3schools</a>.</p>
</details>

This is the Short bit, click to expand.

And this is the longer, expanding text… pretty much anything can go in here, paragraphs, lists etc. Probably images, embeds… There is more info on w3schools.

---

Leaving the rest below for reference.

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

In case javascript is disabled:

<noscript>please allow javascript 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>

script:

<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>