How to make Vertical Accordion Menu CSS only

How to make Vertical Accordion Menu CSS only

The accordion menu is very good when you want to save more space on the website. Today I am going to share you vertical accordion which made with CSS only.

It is designed by best front-end developer and creates without Javascript. You can easily implement by copying and paste the provided code.

In my previous post, I have share you how to make Horizontal Accordion CSS Only with demo and example. In this tutorial, I will show you the vertical menu which works with :target Property.

All of the accordions are differently design with different color schemes. You can pick one which you most like.

You can create one by yourself if you know CSS but why not take benefit of ready made stuff. This will save a lot of time and effort. You only need to customize as per your need.

Vertical Accordion Menu CSS Only

Ok, let’s get started and have a look the how to make accordion which can customize easily. All you have to change the few CSS classes and you will be done.

Here is HTML for first two accordions. If you want to add more, you simply need to copy the code from opening li to closing li and paste just right below.

Next, you need to change the href and ID of div class name content and provide unique.

<ul class="accordion"> <li> <a href="#content-1" class="tab">First</a> <div id="content-1" class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <a href="#content-2" class="tab">Second</a> <div id="content-2" class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> </ul> 

The CSS Styles

You don’t need to write a lot of CSS, just a few lines of code good enough to make the accordion work.

.accordion { margin: 0 auto; padding: 0; width: 20em; height: auto; list-style-type: none; } .tab { display: block; padding: .5em; width: 100%; height: 100%; background: #34495e; color: #e6e6e6; text-decoration: none; border-bottom: 0.1em solid #3d566e; transition: background .25s; } .tab:hover { background: #415b75; } .content { padding: 0 .5em; max-height: 0; background: #272c30; color: #979fa2; overflow: hidden; transition: max-height .25s; } :target { max-height: 10em; } 

Demo

The codepen is provided for you to have a look, how the accordion will look like.

See the Pen CSS vertical accordion menu by Alex Devero (@alexdevero) on CodePen.

Leave a Reply

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