Skip to content

Instantly share code, notes, and snippets.

@kjaymiller

kjaymiller/simple_accordion.html

Created April 3, 2020 16:21
Show Gist options
  • Save kjaymiller/6c8e8494ebe2f28989cd3766d0873eab to your computer and use it in GitHub Desktop.
Save kjaymiller/6c8e8494ebe2f28989cd3766d0873eab to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML Accordion
Raw
simple_accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="simple_accordion.css">
<style rel="stylesheet" type="text/css">
.section {
margin: 5em;
}
</style>
<script src="https://kit.fontawesome.com/94d9a219ee.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Test Display</h1>
<div class="section" id="1">
<h2>
This is a test</h2>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
</div>
<div class="section" id="2">
<h2>
This is a test</h2>
<p>Ipsum ipsum velit fugiat eligendi magni, possimus, quod nulla reprehenderit ullam Eligendi nobis accusantium iusto corrupti quidem aperiam, enim iusto Delectus tenetur aliquid alias sit saepe. Sequi sequi sit iusto</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
</div>
<div class="section" id="3">
<h2>
This is a test</h2>
<p>Ipsum quos nemo minima fuga quidem Voluptatum sit nam quis quis eaque Excepturi quidem autem ipsa sequi officia. Repellat adipisci accusamus nihil vel fugiat Exercitationem explicabo pariatur quia reprehenderit fugiat</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
</div>
<div class="section" id="4">
<h2>
This is a test</h2>
<p>Adipisicing adipisci quae dignissimos unde deserunt Quisquam nam maiores magni saepe magni. Voluptatibus odit voluptatum fuga dignissimos maiores unde Ipsum labore culpa repudiandae enim ad. Enim autem sunt laboriosam adipisci.</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
<p>Adipisicing consectetur enim illo rem veniam asperiores Esse deserunt libero consequuntur culpa adipisci? Sunt aut illo velit obcaecati laboriosam Placeat esse enim molestias error quasi? Asperiores ipsam modi sapiente omnis</p>
</div>
<script type="text/javascript">
var section = document.querySelectorAll('.section h2');
for (item of section) {
item.addEventListener('click', hideIt);
}
function hideIt(el) {
el.srcElement.parentElement.classList.toggle('hidden')
el.srcElement.classList.toggle('collapsed')
}
</script>
</body>
</html>
Raw
simple_accordion.sass
$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
html
width: 100%
height: 100%
perspective: 900
overflow-y: scroll
background-color: $grey
font-family: $sans
color: $black
body
min-height: 0
display: inline-block
position: relative
left: 50%
margin: 90px 0
transform: translate( -50% , 0 )
box-shadow: 0 10px 0 0 $red inset
background-color: $white
max-width: 450px
padding: 30px
h1 , h2
color: $red
h1
text-transform: uppercase
font-size: 36px
line-height: 42px
letter-spacing: 3px
font-weight: 100
h2
font-size: 26px
line-height: 34px
font-weight: 300
letter-spacing: 1px
display: block
background-color: $white
margin: 0
cursor: pointer
p
color: $black
font-size: 17px
line-height: 26px
letter-spacing: 1px
position: relative
overflow: hidden
max-height: 800px
opacity: 1
transform: translate( 0 , 0 )
margin-top: 14px
z-index: 2
div.section
max-height: 800px
overflow: hidden
transition: max-height 0.4s ease-out
div.hidden
max-height: 30px
h2:after
margin: 2em
content: "\2212"
h2.collapsed:after
content: "\002B"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment