Accordion

Developer
Tommy Dunn
Size
2,594 Kb
Views
20,240
  1. Accordion Previews
  2. Accordion HTML Codes
  3. Accordion CSS Codes
  4. Accordion JS Codes

How do I make an accordion?

What is a accordion? How do you make a accordion? This script and codes were developed by Tommy Dunn on 13 October 2022, Thursday.

Accordion Previews
IQ Test

Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion </title> <meta name="viewport" content="width=device-width, initial-scale=1">	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="accordion" class="accordion"> <li> <div class="link">one<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">sub1</a></li> <li><a href="#">sub1</a></li> <li><a href="#">sub1</a></li> <li><a href="#">sub1</a></li> </ul> </li> <li class=""> <div class="link">two<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">sub2</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub2</a></li> </ul> </li> <li> <div class="link">three<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">sub3</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li> <div class="link">four<i class="fa fa-chevron-down"></i></div> <ul class="submenu"> <li><a href="#">sub4</a></li> <li><a href="#">sub4</a></li> <li><a href="#">sub4</a></li> <li><a href="#">sub4</a></li> </ul> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accordion - Script Codes CSS Codes

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: dodgerblue; font-family: helvetica;
}
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;
}
.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);
}
.accordion li.default .submenu { display: block;
}
/** * Submenu -----------------------------*/
.submenu { display: none; background: lightyellow; 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: grey; color: #FFF;
}

Accordion - Script Codes JS Codes

$(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; var links = this.el.find('.link'); 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);
});
Accordion - Script Codes
Accordion - Script Codes
Home Page Home
Developer Tommy Dunn
Username tommyldunn
Uploaded October 13, 2022
Rating 3
Size 2,594 Kb
Views 20,240
Do you need developer help for Accordion?

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!

Tommy Dunn (tommyldunn) Script Codes
Name
Github api
Cards
Full height x width
My-flex-grid
Build a Tribute Page
Poppy
Iphone-6
Material Design Lite components demo
Object Fit
Housebar-static
Create amazing marketing copy with AI!

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!