How we can create multilevel accordion dropdown items? Solution: See this Multi Level Accordion Menu Using jQuery and CSS, Multilevel Dropdown Items.
Previously I have shared some accordion programs, but this is a multi level accordion menu with dropdown items. Basically, accordion is a graphical control element comprising a vertically stacked list of items. Each item can be “expanded” or “collapsed” to show the content associated with that. Mostly we use accordion in the FAQ section because it takes less space and users can see only the answer they want.
Today you will learn to create a Multilevel Dropdown Accordion program. Basically, there are 4 items with title and icon, and 4 items contain some subitems. One of these items has multilevel sub-items, which item contains sub-items that have an arrow icon on the right side. When you will click on that to see sub accordion items, the items will visible and the arrow icons will down facing. There the toggle feature to open and close a list, when you will click on another item then the current item’s dropdown will be closed.
So, Today I am sharing Multi Level Accordion Menu Using jQuery and CSS. There I have used HTML to create the structure, CSS for styling, and jQuery for functioning. It is a JS library that’s why I am putting this post in the JavaScript category. You can use this accordion as a menu in the sidebar, you just have to change text and put links.
If you are thinking now how this accordion menu actually is, then see the preview given below.
Preview Of Multilevel Dropdown Accordion Items
See this video preview to getting an idea of how this accordion looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Custom Select Dropdown Options
- Responsive Testimonial Slider
- Active Tab Animation
- Before and After Image Slider
jQuery CSS Multi Level Accordion Menu Source Code
Before sharing source code, let’s talk about it. First I have created the main div with ID name “accordion” and placed lists inside it. I have placed a list to create the accordion items, I have used HTML list tags <ul> & <li> for creating the multilevel sub-items. There I have used the font-awesome library to place the icons. Also in the HTML file, I have linked external files like CSS, JS, and jQuery CDN.
Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS I have only done basic works like gave size, position, margin, padding, color values to the elements. There I have used CSS transition command for the animation effect. Also used :after command for placing the arrow to show this item has sub-items.
jQuery handling here the toggle show and hide feature in the program. First, jQuery fetched the list items and active class and stored in variables. After that, used .addClass and .removeClass commands to show and hide items according to action. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Multilevel Accordion Menu | Webdevtrick.com</title> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Nunito"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <body> <div id="accordian"> <ul> <li> <h3><a href="#"><i class="fa fa-lg fa-tachometer"></i>Dashboard</a></h3> <ul> <li><a href="#">Reports</a></li> <li><a href="#">Search</a></li> <li><a href="#">Graphs</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li class="active"> <h3><a href="#"><i class="fa fa-lg fa-tasks"></i>Technologies</a></h3> <ul> <li><a href="#">Tech List</a></li> <li class="active"> <a href="#">Codes</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li> <a href="#">JavaScript</a> <ul> <li><a href="#">React JS</a></li> <li><a href="#">Node JS</a></li> <li><a href="#">Angular JS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Anime JS</a></li> </ul> </li> <li><a href="#">PHP</a></li> <li><a href="#">Python</a></li> </ul> </li> <li> <a href="#">Softwares</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Premiere Pro</a></li> <li><a href="#">After Effects</a></li> <li><a href="#">Lightroom</a></li> </ul> </li> <li><a href="#">Frontent</a></li> <li><a href="#">Backend</a></li> </ul> </li> <li> <h3><a href="#"><i class="fa fa-lg fa-calendar"></i></span>Calendar</a></h3> <ul> <li><a href="#">Current Month</a></li> <li><a href="#">Current Week</a></li> <li><a href="#">Previous Month</a></li> <li><a href="#">Previous Week</a></li> <li><a href="#">Next Month</a></li> <li><a href="#">Next Week</a></li> <li><a href="#">Team Calendar</a></li> <li><a href="#">Private Calendar</a></li> <li><a href="#">Settings</a></li> </ul> </li> <li> <h3><a href="#"><i class="fa fa-lg fa-heart"></i>Favourites</a></h3> <ul> <li><a href="#">Global favs</a></li> <li><a href="#">My favs</a></li> <li><a href="#">Team favs</a></li> <li><a href="#">Settings</a></li> </ul> </li> </ul> </div> </body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { margin: 0; padding: 0; } body { background: #8dd4ff; font-family: Nunito, arial, verdana; } #accordian { background: #004050; width: 250px; margin: 50px auto 0 auto; color: white; box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5); } #accordian h3 { background: #003040; background: -webkit-gradient(linear, left top, left bottom, from(#003040), to(#002535)); background: linear-gradient(#003040, #002535); } #accordian h3 a { padding: 0 10px; font-size: 12px; line-height: 34px; display: block; color: white; text-decoration: none; } #accordian h3:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } i { margin-right: 10px; } #accordian li { list-style-type: none; } #accordian ul ul li a, #accordian h4 { color: white; text-decoration: none; font-size: 11px; line-height: 27px; display: block; padding: 0 15px; -webkit-transition: all 0.15s; transition: all 0.15s; position: relative; } #accordian ul ul li a:hover { background: #003545; border-left: 5px solid lightgreen; } #accordian ul ul { display: none; } #accordian li.active>ul { display: block; } #accordian ul ul ul { margin-left: 15px; border-left: 1px dotted rgba(0, 0, 0, 0.5); } #accordian a:not(:only-child):after { content: "\f104"; font-family: fontawesome; position: absolute; right: 10px; top: 0; font-size: 14px; } #accordian .active>a:not(:only-child):after { content: "\f107"; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function() { $("#accordian a").click(function() { var link = $(this); var closest_ul = link.closest("ul"); var parallel_active_links = closest_ul.find(".active") var closest_li = link.closest("li"); var link_status = closest_li.hasClass("active"); var count = 0; closest_ul.find("ul").slideUp(function() { if (++count == closest_ul.find("ul").length) parallel_active_links.removeClass("active"); }); if (!link_status) { closest_li.children("ul").slideDown(); closest_li.addClass("active"); } }) }) |
That’s It. Now you have successfully created Multi Level Accordion Menu Using jQuery and CSS, Multilevel Dropdown Items. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Nice work, thanks, but is it possible to have all tabs closed by default when opening the page ?
yes, you just have to remove active class from the elements.
Fantastic. simple and nice.
How to keep the menu opened on current page?
Excellent!!!
Nice and lean!!!
hello, lovely demo, I am trying to tweak it on my side to use this accordeon menu for my RPG games, rather then using tons of paper that is not very organised in game.
I am a real beginner (started 2 days ago with html) to be honest but trying to tweak the code on Atom by adding sub-menus, changing a few stuff.
I am more or less advancing… :=)
I have one or two questions that are probably very basic for you. So for the moment I have worked localy on my PC (Win), I would like to be able to run this mage once made in my browser, on my pc and Android tablet. What should I do?
Sorry if this seems “stupid”.
Shaan, very nice design !
For a table of contents navigation, I added a “Collapse All” tab by adding:
Collapse All
in the top level block.
Is it possible to create an “Expand All” tab that would activate all elements ?
Shaan, very nice design !
For a table of contents navigation, I added a “Collapse All” tab by adding:
<li><h3><a href=”#”><i class=”fa fa-lg”></i>Collapse All</a></h3></li>
in the top level block.
Is it possible to create an “Expand All” tab that would activate all elements ?
Thank you shaan for this nice content, but I have a question.
Menu works fine when I expand main manus and submenus i.e: “Dashboard”, “Techologies”, “Codes” or “JavaScript”. But when I put a content and make separate htmls for subpages like “Reports”, “Search”, “Tech List” – I would like to stay it open after clicing on the page, but all is automatically collapsing to the first stage. How to make pages open after clicing on them? Many thanks.
Very nice accordion! Thank you.
Is it possible to add a search funtion that only shows the corresponding items?
Great code! Thank you very much.
In order to have the menu available even when (for any reason) Javascript is not enabled, I’ve deleted the rule
#accordian ul ul {display:none;}
from the css file and have it included via a “document.write” function in the html page soon after the “link stylesheet” lines
In this way, when JS is not available, the menu is fully opened and all links are available – even if the result is really ugly.
Whilst, when JS is enabled, the menu runs as in the example.