Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

How to Work with Accordion in CSS3

By John Paul Mueller

You use the accordion in CSS3 to hide any page element from view. When a user selects a category, the elements in that category become visible, and the elements from all other categories are hidden. The effect is to focus user attention and make the user more efficient in performing specific tasks. The following code is all you need to make this feature usable.


The code is concise, but the secret in this case is the way you create the tags for your page. Notice that the Accordion widget hides from view the settings that the user isn’t focusing on. When the user clicks Background Color, the Foreground Color options are hidden from view. Likewise, clicking Options reveals the Options controls.


The controls in each area don’t matter to the Accordion widget, but the HTML5 formatting does. This form also includes a submit button. If you don’t configure the controls properly, the submit button becomes part of the accordion effect, and clicking it no longer submits the form. Here’s a condensed view of the HTML5 for this example:

<form id="ConfigForm"
 <div id="Configuration">
 <h2>Foreground Color</h2>
  <input id="FGRed"
  checked="checked" />
  <label for="FGRed">Red</label><br />
... More inputs and labels ...
 <h2>Background Color</h2>
  <input id="BGRed"
  checked="checked" />
  <label for="BGRed">Red</label><br />
... More inputs and labels ...
  <input id="Sounds"
  value="SpecialSounds" />
  <label for="Sounds">Use Special Sounds</label>
  <br />
  <input id="Effects"
  value="SpecialEffects" />
  <label for="Effects">Use Special Effects</label>
 <input id="ChangeConfig"
  value="Change Configuration" />

Notice that you must place the headings control groups within a separate <div> and then label that <div> as the one you want to use for the accordion effect. A separate <div> houses the individual controls for a specific group. The submit button is part of the form, but it’s outside the Configuration <div>.

When you click the Change Configuration button, you see that the form works as it should — by examining the address field content. Using the defaults, the resulting URL contains Accordion.html?Foreground=Red&Background=Red when you click Change Configuration.