With lots of smart people working on exciting, new html tech (the html component module in particular), I find myself more and more occupied with cleaning up my own html code. One way to do that is to remove functional elements from the html that serve as script toggles. These elements should ideally be added by the script itself. So today, let's take a look at details (or expand/collapse structures if you like), their relation to the accordion pattern and where to reduce redundant html.
One of the new (and often contested) additions of html5 is the details element. While it has (some) semantic value, people have been ogling it because it provides out of the box expand/collapse functionality. Click the handler (summary element) and the content of the box will reveal itself. Super handy, but it doesn't take a genius to predict that many are lining up to abuse the element just for its functionality (remember the days when people used paragraphs just for the default margin that came with them?) rather than use it for its semantic value.
<section data-pattern="details"> ... </section>
<section data-pattern="details"> <header data-unit="toggle"> ... </header> <div class="main" data-unit="body"> ... </div> </section>
The toggle section will function as a handler for hiding and showing the content, the body section defines the part to be show and hidden. In most cases though a toggle and body will already be available in the html (usually the toggle is the entire heading of the section), so the two data-unit attributes will be available in the html already.
<section data-pattern="details" class="jOpen"> ... </section>
Opening and closing the content section will be handled by alternating between two classes on the root (.jOpen and .jClose). Putting a class on the root allows us to style the state of the toggle (usually there is a different open/close state) and the state of the body.
A quick fallback reminder
The accordion pattern is little more than a list of detail patterns that interact with each other. If you open one detail block, you close all the others. The html code should reflect that.
<section data-pattern="accordion"> <section data-pattern="details"> ... </section> <section data-pattern="details jOpen"> ... </section> ... <section data-pattern="details"> ... </section> </section>