Create a pure CSS3 accordion without JS

on

I love CSS3 and every day I discover a feature that I did not know or that I did not imagine feasible in pure CSS3 HTML5. Finally, understand me, I got used to that JavaScript manages the interaction of the user through events, and this example is very common when we talk about accordeons in HTML.
But not anymore, the example I'm going to show you (on the Internet) proves that it is quite possible to create an interactive accordion in HTML5/CSS3 only!

An accordion in pure CSS3? How is that possible?!

Pure CSS accordion
Pure CSS accordion

The author explains that this is achievable via the selector: target so it is only possible on browsers that support this selector (see on can I use the list of browsers that support the selector: target).

The selector: target?

Suppose you have an element whose ID is #mon-Super-element and a link that points to it. It's an anchor. If you click on the link of this anchor, it will be directly affected by the selector: target.

Concrete example

I will in this example use the following source code:
<style></style>
target
text-decoration: underline;
color: #0089a2;
}

<p><a href="#num-1">Click me to surliger number 1</a></p>
<p><a href="#num-2">Click me to highlight number 2</a></p>
<ol></ol>
<li id="num-1">Number one</li>
<li id="num-2">Number two</li>

See the result on CSSDeck

As you can see in the example, it is very simple, and once the principle is understood, we realise the multitude of possibilities that are available to us. Now, understand what's going on with our accordion.

 

See the example created by LukyVj on CSSDeck

Basically the example is composed of three div each with a unique ID (predictable you will tell me) containing themselves a link pointing to that same ID. This facilitates the targeting of the div when the respective link is clicked.
The content is initially hidden with a simple display: none property on the div. When the tab link is clicked, the display property of the div changes to display: block and it is displayed! The following animation is a simple transition (CSS3 property too).
The other tabs are "collapsed" If a tab is clicked, this is also done by the selector: target.
Here, personally, I'm really a fan of the concept! Hoping you liked this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this site are set to "accept cookies" to provide you with the best browsing experience possible. If you continue to use this site without changing your cookie settings or if you click "accept" below, you consent to this.

Close