Clever CSS Tricks: using :target to create accordions

In an interview with Jacob Gube from Six Revisions on the subject of exciting developments in CSS3, Eric Meyer said

 …the power to describe Web 2.0 designs in CSS is insignificant compared with the power to select every third table row starting with the fifth one.  Or being able to select the first paragraph within another element, even if it’s not the first child.  Or selecting any list item that’s the last item in the list.

Eric made it pretty clear that selectors were the cool thing in CSS3. And while I’ll admit that border-radius gradients, media queries and the like are pretty nifty, I kinda have to agree. The CSS3 selectors and pseudo-classes give a whole new level of functionality that used to exist only with the aide of JavaScript. One of those pseudo-classes is :target, and I’ve got a nifty JavaScript-free way to create expand-collapse sections

What is :target ?

To be clear :target is a pseudo-class, not a pseudo-selector. Because of syntax, though, pseudo-classes and pseudo-selectors are often grouped together. I don’t think Eric Meyer would mind me extrapolating his comment to include pseudo-classes.

When you read the specs, you’ll see that it represents an element that’s the target of the referring URI. But if that doesn’t quite make sense, let’s try it this way. You have a table of contents on a page. In order to link to a section, you write something like this <a href="#sectiona">Section A</a> . Once the user has clicked the link, the :target pseudo-class now applies to whatever had that id of sectiona. Essentially, :target tells you that the element was the target of a link.

Great, :target is moderately nifty for glossaries and tables of contents — so what?

Yeah, :target was probably meant for glossaries and whatnot, but who says we can’t think outside of the box? After all, it’s a way of activating an element through CSS instead of JS!

So let’s assume the following:

<article>
<h1><a href="#one">Article one</a></h1>
<div id="one" class="content">
<h2>subheading</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</article>

So, we have an article, and in it we’ve wrapped the juicy part of the content in this non-semantic div. When you click the link in the heading, that div gets that pseudo-class :target.

So, let’s apply this to every div with a class of .content:

 

section article > div.content{
display:none;
}

So now, by default, we don’t see the content, we only see the heading. Now, to see the actual content of the article, all we need is this:

section#demo article > div.content:target{
display:block;
}


Now, if you have concerns about using display:none because of SEO or screenreaders, there’s nothing wrong with applying visibility:hidden /visibility: visible, either.

section article > div.content:target{
display:block;
}

 

Demo Please

Article one

subheading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

Article two

subheading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

Article three

subheading

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

What About animating with :target?

You can pull off all sorts of nifty UI enhancements with animations using :target. However, I’m not so sure about this one. Animation keyframes don’t seem to work between display:block / display: none or visibility:hidden / visibility: visible. I’ve been experimenting with different animation methods and I haven’t yet found one that works in this case. Another challenge, is height: auto. It doesn’t look like you can animate to an auto-height, but you can animate to a height with an absolute value. I’m sure that there are some other clever CSS tricks to accomplish this, though.

Exactly how useful is this?

While I’d consider this a clever CSS3 trick, it’s usefulness lies between IE9 and browsers that don’t yet support summary and detail. Considering that webkit appears to be the only browser that’s using summary and details, this seems like a solid modern-browser, JavaScript-free approach.

Share

2 thoughts on “Clever CSS Tricks: using :target to create accordions

  1. I have got 1 recommendation for your webpage. It appears like there are a couple of cascading stylesheet issues when launching a selection of web pages inside google chrome and safari. It is running okay in internet explorer. Possibly you can double check that.

    • Thanks for bringing it to my attention. Do you think you could explain in a little detail what those CSS issues are? I’ve tested my site pretty heavily in Chrome especially, so if you could tell me what to look for, that’d be great!