Accordion
How do I make an accordion?
An accordion created with only css, no javascript needed.. What is a accordion? How do you make a accordion? This script and codes were developed by Sander on 18 December 2022, Sunday.
Accordion - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/jbxqev.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-wrapper"> <ul class="accordion-container"> <li id="account" class="accordion-item"> <a href="#account"> Account </a> <ul class="accordion-item-content"> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ex sodales, lacinia eros sed, blandit libero. Suspendisse potenti. Duis id consectetur mi. Nunc porttitor, eros vitae elementum convallis, sapien tortor efficitur urna, eget dapibus orci tellus eu felis. Nulla facilisi. Nullam et justo id nulla ornare semper. Nulla in est sit amet quam volutpat egestas. Fusce vulputate nisi ultricies varius finibus. Nam accumsan fringilla sapien ut porttitor. Etiam nisl sapien, sagittis et tellus vitae, pulvinar vehicula ligula. Integer faucibus luctus vulputate. </p> </li> </ul> </li> <li id="downloads" class="accordion-item"> <a href="#downloads"> Downloads </a> <ul class="accordion-item-content"> <li> <p> In ut nisi vel justo consequat tincidunt. Integer sollicitudin a nulla pellentesque finibus. Cras ac nibh a risus tristique vulputate vitae vel arcu. Duis nibh erat, egestas quis ex ac, varius accumsan mi. Donec egestas in risus nec euismod. Proin in gravida nisl, a porta lectus. Nulla non risus eget magna laoreet feugiat id eu est. Integer pulvinar augue eu mollis condimentum. Fusce et elit rutrum nibh egestas facilisis id non urna. </p> </li> </ul> </li> <li id="options" class="accordion-item"> <a href="#options"> Options </a> <ul class="accordion-item-content"> <li> <p> Maecenas mattis semper lectus vel venenatis. Mauris feugiat a est finibus facilisis. Cras rhoncus nisl nec nunc volutpat sagittis. Nam fermentum bibendum condimentum. Vivamus laoreet bibendum nibh eu pellentesque. Aenean sit amet sapien dolor. Cras feugiat mauris non eleifend blandit. Morbi rhoncus ipsum sem, et pharetra mi molestie id. In tellus risus, mattis ornare commodo a, dignissim vel nunc. Sed mi justo, ornare vitae metus eu, congue consequat leo. Ut tincidunt lorem nec diam mattis, vitae volutpat metus bibendum. </p> </li> </ul> </li> </ul>
</div>
</body>
</html>
Accordion - Script Codes CSS Codes
.container-wrapper { max-width: 480px;
}
.accordion-container { padding: 10px; margin: 20px auto; background: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1); li { list-style: none; } > li { > a { display: block; position: relative; padding: 10px 20px 10px 40px; text-transform: uppercase; line-height: 20px; color: #fff; background: $primaryColor; border-top: solid 1px rgba(0, 0, 0, .2); &:before { position: absolute; top: 0; left: 0; width: 40px; height: 40px; text-align: center; line-height: 40px; content: '+'; } } > .accordion-item-content { display: none; li { padding: 20px; background: #fff; } } &:target { > .accordion-item-content { display: block; } > a { &:before { content: '-'; } } } &:first-of-type { a { border: 0; } } }
}
Developer | Sander |
Username | skeurentjes |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 4,280 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 |
Search field | 2,280 Kb |
Button hover effects | 3,642 Kb |
Image gallery with caption | 2,968 Kb |
Horizontal navigation | 2,183 Kb |
Pure CSS dropdown navigation | 2,355 Kb |
Custom input radio buttons | 2,158 Kb |
Side navigation | 3,043 Kb |
Simple gallery | 3,050 Kb |
Sticky widget | 3,762 Kb |
Flexbox table | 4,118 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 |
Eunice A | Ejbronze | 2,203 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Loading... | Adamjacob | 2,384 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Base-Style | Daniel_gooss | 2,614 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!