Dropdowns act as a way of tucking away information that users may not need immediately. They're great for FAQs and text-heavy pages.
What do they look like?
This is a dropdown title, click me!
This is the hidden content that will be revealed when the title is clicked.
This is a dropdown title, click me!
This is the hidden content that will be revealed when the title is clicked.
This is a dropdown title, click me!
This is the hidden content that will be revealed when the title is clicked.
How do I use them?
With ease! Just copy and paste the code below into the Source view of your page. Each code will give you one dropdown. Just paste in as many as you need and edit the content.
<div class="dropdown">
<div class="dropdown-title">
<h5>This is a dropdown title, click me!</h5>
</div>
<div class="dropdown-content">
<p>This is the hidden content that will be revealed when the title is clicked.</p>
</div>
</div>
What if the page I'm editing has existing dropdowns, and the code looks different?
That's going to be pretty common. We've simplified the code to make it easier for you to edit your pages, but there's so many dropdowns across the site that we're updating them as and when the pages need updating, so you may find that the code you're looking at looks very different.
Please copy and paste the content to a document (not the code - just the text in the dropdowns!) and then transfer it into these new dropdowns. They're much easier to use!