Accordion Dropdown
How do I make an accordion dropdown?
Forked from Narjit Aujla's Pen Accordion Dropdown.. What is a accordion dropdown? How do you make a accordion dropdown? This script and codes were developed by Roy on 15 November 2022, Tuesday.
Accordion Dropdown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion Dropdown</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<ul id="accordion" class="accordion"> <li> <div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-code"></i>Coding<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Javascript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ruby</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablet</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablet</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablet</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablet</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Tablet</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Desktop</a></li> </ul> </li> <li> <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">Google</a></li> <li><a href="#">Bing</a></li> <li><a href="#">Yahoo</a></li> </ul> </li>
</ul> <script src="js/index.js"></script>
</body>
</html>
Accordion Dropdown - Script Codes CSS Codes
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #2d2c41; font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
ul { list-style-type: none; }
a { color: #b63b4d; text-decoration: none;
}
.accordion { width: 100%; max-width: 360px; margin: 30px auto 20px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; height: 500px; overflow-y:auto;
}
.accordion .link { cursor: pointer; display: block; padding: 15px 15px 15px 42px; color: #4D4D4D; font-size: 14px; font-weight: 700; border-bottom: 1px solid #CCC; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
.accordion li:last-child .link { border-bottom: 0; }
.accordion li i { position: absolute; top: 16px; left: 12px; font-size: 18px; color: #595959; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px;
}
.accordion li.open .link { color: #b63b4d; }
.accordion li.open i { color: #b63b4d; }
.accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
/** * Submenu -----------------------------*/
.submenu { display: none; background: #444359; font-size: 14px;
}
.submenu li { border-bottom: 1px solid #4b4a5e; }
.submenu a { display: block; text-decoration: none; color: #d9d9d9; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;
}
.submenu a:hover { background: #b63b4d; color: #FFF;
}
Accordion Dropdown - Script Codes JS Codes
$(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; // Variables privadas var links = this.el.find('.link'); // Evento links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false);
});
Developer | Roy |
Username | roygwells |
Uploaded | November 15, 2022 |
Rating | 3 |
Size | 2,738 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Coordinate Systems | 1,514 Kb |
SVG Playground | 1,834 Kb |
Gradients | 1,713 Kb |
SVG Path Experiments | 1,864 Kb |
D3 Gauge | 3,432 Kb |
Guage | 5,653 Kb |
Close ICon | 1,568 Kb |
IIFE | 5,045 Kb |
Modular Guage | 5,852 Kb |
SVG Path Experiments 2.0 | 1,904 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Scroll using CSS | Casperovic | 2,159 Kb |
DNA Double Helix | Hugo | 5,112 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Ocean | Gordonnl | 2,817 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!