Skip to content

Instantly share code, notes, and snippets.

@ourmaninamsterdam

ourmaninamsterdam/accordion.css

Last active December 16, 2015 01:19
Show Gist options
  • Save ourmaninamsterdam/5354031 to your computer and use it in GitHub Desktop.
Save ourmaninamsterdam/5354031 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS3 Accordion with Deep link and inter-slide navigation. Haven't tested but should work IE8, just without animations. No fallbacks for IE7 at this time. Trying to figure out how to close an open slide when clicking the open link again.
Raw
accordion.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
background: rgba(40,40,40,1);
font: 62.5%/1.5 "Helvetica Neue", sans-serif;
}
body {
padding: 10px;
}
img {
height: auto;
margin-bottom: 1.5em;
width: 100%;
}
p, ul li {
font-size: 1.3rem;
}
p, h1 {
margin: 0 0 1em;
padding: 0 10px;
}
.accordion-item {
margin: 0 auto;
max-width: 600px;
}
.accordion-content {
background: #fff;
-webkit-box-shadow: inset 0 2px 10px rgba(0,0,0,.3);
box-shadow: inset 0 2px 10px rgba(0,0,0,.3);
overflow: hidden;
position: relative;
}
.accordion-content-wrap {
margin-top: -300px;
max-height: 300px;
overflow: auto;
padding: 10px 0;
-webkit-transition: 1s margin;
-moz-transition: 1s margin;
-o-transition: 1s margin;
-ms-transition: 1s margin;
transition: 1s margin;
-webkit-overflow-scrolling: touch;
}
.accordion-item:target .accordion-content-wrap {
margin-top: 0;
-webkit-transition: 1s margin;
-moz-transition: 1s margin;
-o-transition: 1s margin;
-ms-transition: 1s margin;
transition: 1s margin;
}
.show {
background: #000 -webkit-linear-gradient(top, #000, rgba(50,50,50,1));
background: #000 -moz-linear-gradient(top, #000, rgba(50,50,50,1));
background: #000 -o-linear-gradient(top, #000, rgba(50,50,50,1));
background: #000 -ms-linear-gradient(top, #000, rgba(50,50,50,1));
background: #000 linear-gradient(top, #000, rgba(50,50,50,1));
color: #F70077;
font-size: 1.4rem;
font-weight: bold;
display: block;
line-height: 1.1;
padding: 10px;
position: relative;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color .3s, text-shadow .3s;
-moz-transition: color .3s, text-shadow .3s;
-o-transition: color .3s, text-shadow .3s;
-ms-transition: color .3s, text-shadow .3s;
transition: color .3s, text-shadow .3s;
}
.accordion-item:target .show,.show:hover {
color: #fff;
text-shadow: 2px 2px 0 #000;
-webkit-transition: color 1s, text-shadow 1s;
-moz-transition: color 1s, text-shadow 1s;
-o-transition: color 1s, text-shadow 1s;
-ms-transition: color 1s, text-shadow 1s;
transition: color 1s, text-shadow 1s;
}
Raw
accordion.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>CSS3 Accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<div class="container">
<div class="accordion-item" id="a1">
<a class="show" href="#a1">Pure CSS Accordion</a>
<div class="accordion-content">
<div class="accordion-content-wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, repudiandae, porro, natus, repellat exercitationem ducimus pariatur nobis molestias ratione at ex nam enim atque laborum iure dolor eaque inventore modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
<a href="#a2">Go to Next slide &raquo;</a>
</p>
</div>
</div>
</div>
<div class="accordion-item" id="a2">
<a class="show" href="#a2">Deep Linking and inter-slide navigation supported</a>
<div class="accordion-content">
<div class="accordion-content-wrap">
<p>
<a href="#a1">&laquo; Go to Previous slide</a>
|
<a href="#a3">Go to Next slide &raquo;</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium, quasi, molestias, vero molestiae quas fuga placeat expedita impedit doloribus pariatur ratione at natus sequi tempora ab dicta odit modi?
</p>
</div>
</div>
</div>
<div class="accordion-item" id="a3">
<a class="show" href="#a3">Any type of content</a>
<div class="accordion-content">
<div class="accordion-content-wrap">
<p>
<a href="#a1">&laquo;&laquo; Back to First slide</a><br>
<a href="#a2">&laquo; Go to Previous slide</a>
</p>
<h1>Consectetur elit</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, repudiandae, porro, natus, repellat exercitationem ducimus pariatur nobis molestias ratione at ex nam enim atque laborum iure dolor eaque inventore modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<img src="http://placekitten.com/300/200">
<p>
Lorem ipsum dolor sit amet, <a href="#a1">link to another slide</a>. Voluptatum, repudiandae, porro, natus, repellat exercitationem ducimus pariatur nobis molestias ratione at ex nam enim atque laborum iure dolor eaque inventore modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, repudiandae, porro, natus, repellat exercitationem ducimus pariatur nobis molestias ratione at ex nam enim atque laborum iure dolor eaque inventore modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment