Create a pure CSS3 accordion without JS


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:
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>
<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.

Laisser un commentaire

Contenu non disponible.
Merci d’accepter les cookies en cliquant sur « Accepter » sur la bannière.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.