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!
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:
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:
I will in this example use the following source code:
<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>
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.
Basically the example is composed of thr
ee div each with a unique ID (predictable you will tell me) containing themselves a link pointing to that same ID. This facilitates the targeting o
f the div when the respective link is clicked.
The content is initially hidden with a simple display: n
one property on the
div. When the tab link is clicked, the display property
of the di
v changes to d
isplay: block and it is displayed! The following animation is a simp
le transition (CSS3 property too).
The other tabs are "collapsed" If a tab is clicked, this is also done by the selector:
Here, personally, I'm really a fan of the concept! Hoping you liked this article.
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.