How to Create Pure CSS Accordion

Let's create a CSS Accordion without using any jQuery or Javascript. As I mentioned in my previous post "An easy way to create Tabbed Content with jQuery & CSS" displaying a lot of information on one page is a bit difficult ...
May 16, 2013 CSS, HTML, code-snippets

In this tutorial, I’ll create a CSS Accordion without using any jQuery or Javascript. As I mentioned in my previous post “An easy way to create Tabbed Content with jQuery & CSS” displaying a lot of information on one page is a bit difficult and we can use tabbed content or accordions to achieve the same without compromising on user experience.

We can always use jQuery to include nice effects on our css accordion. However, we are going to create a pure css accordion which will work on any browser, with or without javascript enabled.

View Demo

Lets start with writing some HTML Code. We will use UL (unordered list) element to create our pure css accordion.

HTML Code for pure CSS Accordion:

<ul id="accordion">
    <li>
        <h2>Title One</h2>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
    </li>
    <li>
        <h2>Title Two</h2>
        <div class="content">
            Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
        </div>
    </li>
    <li>
        <h2>Title Three</h2>
        <div class="content">
            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
        </div>
    </li>
    <li>
        <h2>Title Four</h2>
        <div class="content">
            Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </li>
</ul>

 

As you can see, I have a UL element and added a class named “accordion”. Within the LI element, I have H2 and a DIV tag with class “content”. And we will play with the CSS display attribute to create our pure css accordion.

Lets write some CSS code to stylise the same and hide our DIV.content within the LI tags.

CSS Code for pure CSS Accordion:

#accordion{
    width: 600px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#accordion h2{
    font-size: 12pt;
    margin: 0px;
    padding: 10px;
    background: #ccc;
    border-bottom: 1px solid #fff;
}
#accordion li div.content{
    display: none;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}
#accordion li:hover div.content{
    display: inherit;
}

 

As you can see in above code, we have used display:none  for the div.content and on li:hover  we have used display:inherit . The div.content is within the list element so this trick would work. If our div.content would have been outside this panel, we would have used jQuery to achieve the same.

Very soon, I’ll explain to achieve the same with jQuery and will use some nice animation as well.

  • Mike

    Used your accordion on my personal site: https://mikesiesel.com – Thanks!

    I like the simplicity of it and it was easy to style. What I’d like to see is a menu that operates a stack of divs as if they are separate pages. width and height 100% so they would flex, and text that would scale for multiple devices.

    Unfortunately I’m not good at scripting.

    Cheers, Mike

  • Robbie Noordzy

    Great coding thanks!
    Just a note for correction – in the HTML coding section you’ve spelt Accordion – Accordian

  • Robbie Noordzy

    The other thing that needs to be assigned is width of the li in the css area. If the content is too little it will wrap the next header to the end of the content or the following html code if it’s the last header/content in the accordion.

  • Ronan

    Hello,
    thanks for this code helped me a lot. I’m just starting with css code. Well, it’s working very well but, is it possible to do the same “on click”, on the h2 line ?
    I don’t know if i’m clear on my question. Sorry for my English. Thanks. Ronan (France)

    • Hi Ronan, to use click functionality we need to use a checkbox and then apply custom css to :checked pseudo class. Otherwise jQuery is the rescue.

  • David

    Kudos for display: inherit. You’re a real G!

  • Jean-Marie Sanchez

    Hi:

    Great script, but it will be possible if instead of “hover”, could it function with a “click”

    Thanks

  • Georges

    Hi, Mohit.
    Thanks for the snippet. Amongst many others I found, yours was the fanciest but it was certainly the most concise and the one that worked really well on mobile devices. Much appreciated.
    I used it as coded by you. I had tried using your code (albeit a bit modified) on a Definition List (dl,, dt, dd tags) but it didn’t quite work, I am not sure why. Maybe I am not versed enough to adapt it to the different mark-up I had. Do you believe it’d be possible?

    Regards from Brazil.

    • Hi, It should work with the definition lists as well, coz that too is just an HTML element and we can use it as a selector in CSS.

  • Keiran Earl

    Fantastic and one of the simplest explanations out there.

    I’d love to see one on how to create a sidebar vertical menu with accordion sections.
    I’m working on a Storenvy storefront and you only really have access to HTML and CSS, plus they don’t have nested menus, so it’s going to require some very creative coding to get it all to play nicely.

  • Elias Perez

    it’s there a way to make this to be on click action instead of hover ? i love the Style and simplicity of the accordion but i’d love it more on click action that way you don’t have to worry about the mouse moving.

    • Yes, if only with CSS then we need to use a checkbox and play with the :checked pseudo class, otherwise, jQuery works great with click events.

  • Manuel

    Hello,

    I have tested it on mobile iphone 4, and does not work

  • Falguni

    Hi its very helpful but if I want to dynamically bind database record to accordion control in MVC4 Asp.net then How I can do that?