Expandable Areas in HTML

Using jQuery (version 1.11) and a little CSS, it's possible to create expandable sections in an HTML page across IE, FireFox, Chrome and Safari.

The Problem with Expandable Areas in HTML

Do a search for expandable areas in HTML, accordion controls, toggling HTML or hiding sections of an HTML page and there are hundreds of approaches. Given so many different ways of accomplishing the same functionality, it's a wonder that jQueryUI doesn't have a standard method (wait! They do, but it doesn't handle sections of different sizes as of April 2015; ref: jQueryUI Accordion). There are plenty of approaches using custom tagged elements and JavaScript, some even bite around the edges of jQuery without completely drinking the jQuery kool-aid. The concept is simple enough to code using jQuery, JavaScript and CSS, but searches show it's even easier to mess up and build a custom solution.

Why build an expandable section within an HTML page? Without getting into an esoteric discussion of usability, screen resolutions, etc., a huge list of detailed rows may not be desired to display at all times. The user may then choose to "drill down" into the details when they choose. What was needed for the GunStockMarket was sections which could be expanded upon demand letting a user dig into the details of the data behind the graphs.

Headers Control the Expansion

Using a click on a header tag (<h2> in this example, but this approach could be expanded to other tags) may seem a little strange, it's not a button or a link so why would a click make sense? To help guide a user to click on the header, it is possible to use the before pseudo-element of CSS. The before pseudo-element allows CSS to control what appears before the element and allows control of the styling of what is inserted before the element.

The CSS

The CSS to insert content before the header tag uses basic characters and a border. The trick is that there will be two before styles defined:

/* Toggle styles */
.heading:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
.headingClose:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "\2212";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

The CSS above defines two classes, and one more class will be used. The additional class ("content" in this example) is used within the jQuery but does not have to have a definition attached to the class for the example to work.

The HTML

The tidbit of HTML defines a header (<h2> in this example) and a div section to be expanded/collapsed when the header is clicked.

<h2 class="heading">First Section</h2>
<div class="content">
<p>This is a short bit of content.</p>
</div>

The neat thing here is that any HTML content inside the div will be expanded or collapsed with the click on the header. Further, every header with a class="heading" will receive the functionality.

The other requirement within the HTML is to include the jQuery library.

The JavaScript

The bit of JavaScript required leverages jQuery to navigate the document.

<script type="text/javascript">
jQuery(document).ready(function() {
   jQuery(".content").hide();
   jQuery(".heading").click(function()
   {
      jQuery(this).next(".content").slideToggle(250);
      jQuery(this).toggleClass('heading headingClose');
   });
});
</script>

This JavaScript fires when the document is ready, and first hides all of the div's which are of the content class. Next, every tag of the class "heading", gets a function appended to it. Within the function fired upon a click, the next tag with of the class content is expanded or collapsed using the slideToggle() method of jQuery. Finally, the .toggleClass() method is invoked to swap the styles; this is necessary as CSS is static once loaded.

Summary

There are hundreds of ways to skin the cat of making HTML sections expand and collapse, this is only one approach. For a simple working example see: www.georgestragand.com/assets/expandExample.html; and a bigger example exists on the GunStockMarket.