Horizontal Accordion CSS Only

Horizontal Accordion CSS

The simple accordion is good enough in modern day designing. That’s why have to make horizontal accordion using CSS only.

I am sure you love this different style accordion, and you will not find such example over the internet before.

The advanced CSS3: compelling target appropriately powerful and allows us to make the beautiful widgets. The target function works like Javascript.

We’ve already built a Pure CSS Accordion Menu and here we have another great and awesome example of horizontal accordion which you surely want to implement.

Horizontal Accordion CSS Only

In this post, we’ll create an accordion horizontal using the same HTML5 and CSS3.

Here is first part of HMTL code and you will find the complete code in demo

<ul class="horizontal-accordion"> <label for="one"> <li class="item"> <input checked type="radio" name="accordion" id="one"> <div class="item--container"> <header class="item--header"> <span class="item--header--icon"><i class="fa fa-compass"></i></span> <h4 class="item--header--title">Maîtrise d'ouvrage</h4> </header> <ul class="item--description"> <li>Cahier des charges</li> <li>Spec fonctionnelle</li> <li>Spec technique</li> <li>Audit</li> <li>Gestion de projet</li> </ul> <footer class="item--footer"> <a href="#"><i class="fa fa-angle-right"></i>En savoir plus</a> </footer> </div> </li> </label> </ul> 

The icons are used from the font awesome.

See the Pen Horizontal accordion CSS only by Mickael Chanrion (@Michkkael) on CodePen.

Let’s have a look the Basic CSS and here it is.

.horizontal-accordion { position: absolute; bottom: 10%; overflow: hidden; list-style: none; padding-left: 0; margin: 0 auto; font-size: 0; text-align: center; width: 100%; height: 250px; color: #fff; } .horizontal-accordion label { margin: 0; font-weight: inherit; height: 100%; display: inline-block; } .horizontal-accordion label:first-child .item { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .horizontal-accordion label:last-child .item { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .horizontal-accordion input[name="accordion"] { display: none; } 
Leave a Reply

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