Accordion

Developer
Size
4,280 Kb
Views
14,168

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 Previews

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; } } }
}
Accordion - Script Codes
Accordion - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 4,280 Kb
Views 14,168
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!

Sander (skeurentjes) Script Codes
Create amazing love letters 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!