CSS Accordion

Developer
Pollardld
Size
3,972 Kb
Views
12,144
  1. CSS Accordion Previews
  2. CSS Accordion HTML Codes
  3. CSS Accordion CSS Codes

How do I make an css accordion?

Accordion built using all CSS. The :target css selector is used.. What is a css accordion? How do you make a css accordion? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

CSS Accordion Previews
IQ Test

CSS Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Accordion</title> <link href='https://fonts.googleapis.com/css?family=Flamenco' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #734f79; font-family: 'Flamenco', serif;
}
h1 { color: #fff; font-weight: normal; font-size: 2.5rem; text-align: center;
}
.readme { color: #fff; margin: 0 auto; width: 80%;
}
.readme a { color: #00a486;
}
/*_________________ Accordion
________________________________________*/
.accordion { position: relative; margin: 60px auto; width: 80%;
}
[id*="open-accordion"], [id*="close-accordion"] { background: #00a486; border-bottom: 1px solid #fff; line-height: 40px; height: 40px; display: block; margin: 0 auto; position: relative; width: 99%;
}
[id*="close-accordion"] { display: none;
}
.accordion a { color: #fff; font-size: 1.25em; font-weight: normal; padding-left: 2%; text-decoration: none; text-shadow: none;
}
[id*="open-accordion"]:after, [id*="close-accordion"]:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(255, 255, 255, 0.6); position: absolute; right: 5px; top: 15px; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
}
.target-fix { display: block; top: 0; left: 0; position: fixed;
}
.accordion-content { background: #fff; height: 0; margin: -1px auto 0; padding: 0 2.5%; position: relative; overflow: hidden; width: 90%; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease;
}
.accordion span:target ~ .accordion-content { display: block; height: auto; padding-bottom: 25px; padding-top: 10px;
}
.accordion span:target ~ [id*="close-accordion"] { display: block;
}
.accordion span:target ~ [id*="open-accordion"] { display: none;
}
.accordion span:target ~ [id*="close-accordion"]:after { border-top: 10px solid #333; transform: rotate(0deg); -webkit-transform: rotate(0deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>All CSS Accordion</h1>
<div class="accordion"> <!-- span to target fix closing accordion --> <span class="target-fix" id="accordion"></span> <!-- First Accoridon Option --> <div> <!-- span to target fix accordion --> <span class="target-fix" id="accordion1"></span> <!-- Link to open accordion, hidden when open --> <a href="#accordion1" id="open-accordion1" title="open">First Accordion</a> <!-- Link to close accordion, hidden when closed --> <a href="#accordion" id="close-accordion1" title="close">First Accordion</a> <!-- Accorion content goes in this div --> <div class="accordion-content"> <p>Accordion 1 Content</p> </div> </div> <!-- Second Accoridon Option --> <div> <span class="target-fix" id="accordion2"></span> <a href="#accordion2" id="open-accordion2" title="open">Second Accordion</a> <a href="#accordion" id="close-accordion2" title="close">Second Accordion</a> <div class="accordion-content"> <p>Accordion 2 Content.</p> </div> </div> <!-- Third Accoridon Option --> <div> <span class="target-fix" id="accordion3"></span> <a href="#accordion3" id="open-accordion3" title="open">Third Accordion</a> <a href="#accordion" id="close-accordion3" title="close">Third Accordion</a> <div class="accordion-content"> <p>Accordion 3 Content</p> </div> </div> </div>
<div class="readme"> <p>For multiple accordions on a single page, repeat process, but assign different id names. <a href="https://codepen.io/pollardld/full/lthAF"> Multiple accordions example</a></p> <p>Beware use on Android 2.2 and 2.3. The default browser on these versions does some curious things.</p>
</div>
</body>
</html>

CSS Accordion - Script Codes CSS Codes

body { background: #734f79; font-family: 'Flamenco', serif;
}
h1 { color: #fff; font-weight: normal; font-size: 2.5rem; text-align: center;
}
.readme { color: #fff; margin: 0 auto; width: 80%;
}
.readme a { color: #00a486;
}
/*_________________ Accordion
________________________________________*/
.accordion { position: relative; margin: 60px auto; width: 80%;
}
[id*="open-accordion"], [id*="close-accordion"] { background: #00a486; border-bottom: 1px solid #fff; line-height: 40px; height: 40px; display: block; margin: 0 auto; position: relative; width: 99%;
}
[id*="close-accordion"] { display: none;
}
.accordion a { color: #fff; font-size: 1.25em; font-weight: normal; padding-left: 2%; text-decoration: none; text-shadow: none;
}
[id*="open-accordion"]:after, [id*="close-accordion"]:after { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(255, 255, 255, 0.6); position: absolute; right: 5px; top: 15px; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
}
.target-fix { display: block; top: 0; left: 0; position: fixed;
}
.accordion-content { background: #fff; height: 0; margin: -1px auto 0; padding: 0 2.5%; position: relative; overflow: hidden; width: 90%; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease;
}
.accordion span:target ~ .accordion-content { display: block; height: auto; padding-bottom: 25px; padding-top: 10px;
}
.accordion span:target ~ [id*="close-accordion"] { display: block;
}
.accordion span:target ~ [id*="open-accordion"] { display: none;
}
.accordion span:target ~ [id*="close-accordion"]:after { border-top: 10px solid #333; transform: rotate(0deg); -webkit-transform: rotate(0deg);
}
CSS Accordion - Script Codes
CSS Accordion - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 4
Size 3,972 Kb
Views 12,144
Do you need developer help for CSS 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!

Pollardld (pollardld) Script Codes
Name
New Header
Nav Combine
Bejeweled pieces
Turkey Hunting with Horizontal Lines
Form Submit to Google Forms
Mapbox Directions, GeoLocation, Tracking, and Firebase
Pipe Billow SVG Animation
Triceratops
Animation mixin
Dropdown Selector
Create amazing blog posts 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!