Dropdown Content

You can “hide” your content and let your readers read the hidden information by clicking a button. This keeps the page neat and tidy, and is generally used on pages with a lot of information, when you don’t want to overwhelm the reader. You can see we’ve used this code on the rhs login, wrc, and nursing faq pages.

 
Feel free to copy and paste this sample code and adjust it to your needs:
<details>
<summary>Dropdown!</summary>
<p>Hello! This is some sample content! Keep reading the tutorial to see what other options you can use to customize the content/display a little.</p>
</details>

 
After you preview the page, it should look something like this:

Dropdown!

Hello! This is some sample content! Keep reading the tutorial to see what other options you can use to customize the content/display a little.

Setting the Size of the “infobox”

We’ve made a couple of options that you can use for the inner content of the dropdown box. Feel free to add more infoboxes within the drop-down-box div.

  • halfbox
  • thirdbox
  • twothirdbox
  • fullbox
They Look Like This:

fullbox! This is some sample content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, debitis commodi molestiae ipsa ab, tempore deleniti similique. Quos at vel corporis eius, blanditiis qui aliquam non, quas, numquam eligendi unde?

halfbox! This is some sample content! Lorem ipsum dolor sit amet, consectetur adipisicing elit.

thirdbox! This is some sample content! Lorem ipsum dolor sit amet.