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 |
Automatic scroll | 4,042 Kb |
Flexbox table | 4,118 Kb |
Image clip path mask | 3,911 Kb |
Sidenavigation | 3,421 Kb |
Side navigation | 3,043 Kb |
Image gallery with caption | 2,968 Kb |
Sticky widget | 3,762 Kb |
Flexbox layout | 3,615 Kb |
Animates search input with only css | 4,335 Kb |
Horizontal navigation | 2,183 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 |
Image grid with captions | Mchernin34 | 2,222 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Welcome | Nakome | 6,076 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
RSW | JordanC | 3,726 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
CSS Variables | Jdsteinbach | 4,759 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!