Home » Coding » 18 Best HTML5 CSS3 Accordion Tabs and Menus
responsive css tab menu

18 Best HTML5 CSS3 Accordion Tabs and Menus

jquery has become very popular and by default most modern browsers allow jquery code to run on them without any issues. We can find many special effects made for html websites with the help of jquery and css. Accordion menu and tabs are very important part of a website either its business website or creative as you cant leave the accordion , tab part. Pure css accordion tabs are rare but once done with css3 alone we can see cross platform support for them.

Below you will find free and premium accordion, tabs made to implement on your website. A little HTML , CSS knowledge is required to grab the free ones listed below to implement them freely on your new website. CSS, HTML, Jquery code is shown in codepen or cssdeck website you will have to manually integrate theme without much help. Premium stuff provided here will be much more straight forward with proper docs which will let you to integrate it easily on your website.

Last time we have added many free resources for css templates so make sure to get a look at them as well.

Pure CSS Tabs

This css tab menu can be integrated onto your website with ease . One of the fluid css tabs with no jquery or javascript i have found today.

Demo | Download pure css tabs

Responsive CSS Tabs

A brilliant design of tab system for accordions with responsive design.

Demo | Download responsive css tab menu

Css Tab menu

An interesting tab menu with added images and icons with additional styles and interest to the viewer. This download includes no jquery as the code is designed with pure css and html elements.

Demo | Download free accordion tab css menu

Free Simple sass/jQuery Accordion

Download Simple jQuery Accordion

Free Pure CSS Horizontal Accordion

I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.

Download Pure CSS Horizontal Accordion

CSS Responsive Animated Accordion

There are some magic numbers in here – as I was animating max height to achieve the accordion effect.

Download CSS Responsive Animated Accordion

CSS3 Multiple Accordion Menu

A fully functional accordion menu, using unordered lists and checkboxes, to allow users to have accordion open/closed as required.

Download CSS3 Multiple Accordion Menu

Simple Accordion

Simple dynamic accordion that can be duplicated as much as you want!

Download Simple Accordion

Multi-level Accordion

Download Multi-level Accordion

Super basic accordion

Download Super basic accordion

Responsive Accordion to Tabs

Download Responsive Accordion to Tabs

Sky Tabs

Sky Tabs is a clean, responsive solution for creating beautiful tabbed navigation without any javascript usage.

Source Sky Tabs

Zozo Tabs

Zozo Tabs is a user-friendly, fully customizable, responsive jQuery tabs plugin to take any HTML content, including images, videos and display it in a clean organised and responsive tabbed navigation.

Source zozo tabs

Tabbed – HTML5 & CSS3 Responsive Tabs

If you wish to spice up your corporate website, blog, ecommerce site or a message board, with Tabbed it’s easy to show any content, video, price or data tables, form or other elements.

Source Tabbed

Pure CSS3 Tabs

`Source Pure CSS3 Tabs

Tabion – Metro Tab Accordion Switcher CSS

Source tabbed css

Pure CSS3 Responsive Tab

`Source CSS3 Tabs

CSS3 Flat Accordion

Source css3-flat-accordion


Past Contributors: Allie Kingsley

Disclosure: This page may contain external affiliate links that result in us receiving a commission, at no additional cost to you. The opinions are personal and strictly based on our understanding of the product.

About Rijo Abraham

Rijo is the Heart & Soul of DesignSeer. Writes honest reviews based on facts, that are easy to digest, that are not personally biased. Loves to interview those in the realm of WordPress. Hobbies; Takes Amazon Polly way too seriously.

12 comments

  1. sravani

    Hi i can help u out in this slider mail me if u want

  2. Ben Stuart

    Thanks for the list, I had been looking for some tuts on Accordians with HTML 5’s use, and couldn’t find many, so this is a big help :)

  3. MAHDI DAMARCHILU

    thanks for this goooooood post ^_^

  4. Wolfgang Tschertou

    First Thanks for your helpful tutorials! I have to include a small problem with “Responsive CSS Tabs” it in my website. Maybe you have a solution?

    I have tried a few things, unfortunately without success. How do I have the “section” rewrite that both works Menu and Tabs?

    section {
    display: none;
    padding: 20px 0px 0px;
    border-top: 1px solid #DDD;
    }

    I have made an example. http://www.quad-asia-travel.com/demo-tab.html

    Many thanks in advance!

    • sakshi

      nice accordians

  5. pandu

    waw .. a great accordion tabs ..

    thanks for sharing :D

  6. pragya

    Tabbed – HTML5 & CSS3 Responsive Tabs is awesome

  7. reza

    Thank
    It was so good

  8. Pogoda

    Good. But I also use Solid Tabs with bootstrap

  9. kostas

    Very good, but I’m looking for an accordion that opens from the top and the close button will be in the bottom of the accordion. Can I find this accordion structure?

  10. Philipp

    hi,

    thank you for this list of great accordions.

    I have been searching for accordions at the moment and found this great ressource here.

    Now going to try different ones :-).

    Thank you, Philipp

Leave a comment

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

1 + twelve =