Dropdown Content

You can “hide” your content and llet 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:
<div class="topicbox">
<h2>Dropdown! <i class="fa fa-chevron-down"></i></h2>
<div class="drop-down-box">
<div class="infobox fullbox">
<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>
</div>
</div>
</div>

At the very end of your content document, paste this code (you only need to do this once per page):
<script src="https://dixie.edu/wp-content/themes/dixie-s15/js/extras/content-dropdown.js"></script>

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

Dropdown!

 


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: