Home > css, html > Simple accordion using CSS3 :target selector (no JavaScript)

Simple accordion using CSS3 :target selector (no JavaScript)

I made a simple “accordion” style UI that consists of several collapsed sections with only the “current” one expanded, using the CSS3 :target selector. I wanted the basic functionality of the JQuery UI accordion, but in a minimalistic way, without any JavaScript.

The :target selector is supported in all modern browsers, including IE9 and IE10, but not in IE8 and earlier.

In a real application with a variable number of accordion sections you would probably generate the HTML for the sections with some sort of iteration. You need to make sure that each section id is a valid unique id on the page and that the href of the link in the section header points to the section id, prefixed by ‘#’.

The minimal sample code is in jsfiddle 1, a version with some more visual style is in jsfiddle 2. For illustration, I am also posting the sample code here (see below).

I used a <div> for the whole accordion, a <fieldset> for each section, a <legend> for the section header and nested <div>…</div> for the section content.

Please note that you can use other HTML tags, as long as you use the CSS classes used in the stylesheet and the same kind of nesting.

HTML code:

<div class="accordion">
  <fieldset class="section" id="id1">
    <legend class="section-header">
      <a href="#id1">Section 1</a>
    </legend>
    <div class="section-content">
      Section 1 content
    </div>
  </fieldset>
  <fieldset class="section" id="id2">
    <legend class="section-header">
      <a href="#id2">Section 2</a>
    </legend>
    <div class="section-content">
      Section 2 content
    </div>
  </fieldset>
</div>

CSS stylesheet code:

.accordion .section {
    margin: 1em;
}
.accordion .section-header a {
    text-decoration: none;
    color: gray;
}
.accordion .section:hover .section-header a {
    color: red;
}
.accordion .section .section-content {
    display: none;
}
.accordion .section:target .section-content {
    display: block;
}
.accordion .section:target {
    border: 2px solid navy;
}
.accordion .section:target .section-header a {
    color: navy;
    cursor: default;
}
.accordion .section-header a:before {
    content:"\25BA\0000a0"
    /* unicode triangle pointing right */
}
.accordion .section:target .section-header a:before {
    content:"\25BC\0000a0"
    /* unicode triangle pointing down */
}
Advertisements
Categories: css, html
  1. iZverev
    November 5, 2013 at 05:32

    Thanks, this seems to be the best solution I’ve seen, especially for mobile websites!

  2. GrnVic
    January 6, 2015 at 11:05

    For start sorry for my english because i french…..^^
    I take your code but, when i clic on one section, it’s not he content of this section who is display but one other page of my app. Do you know why? Tanhks

    • January 7, 2015 at 09:17

      Are you using IE8 or older ?

      • GrnVic
        January 7, 2015 at 10:21

        No juste google chrome

      • January 7, 2015 at 18:24

        Please try http://jsfiddle.net/YZNFK/1/
        If that works then start by copying from there.

        Also make sure you are not using the referenced ids anywhere else in your page.

  3. GrnVic
    January 6, 2015 at 11:06

    The content ‘ (sorry)

  4. January 7, 2015 at 18:28

    Also, this accordion navigation might not work with HTML frames. Haven’t tested it.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: