Skip to content

Instantly share code, notes, and snippets.

@dceoy

dceoy/accordion.html

Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dceoy/bec35d51cffe05929a39 to your computer and use it in GitHub Desktop.
Save dceoy/bec35d51cffe05929a39 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion</title>
<meta name="author" content="d4i"/>
<style>
.accordion {
list-style: none;
}
.accordion .abstract {
display: none;
padding: 0.5em 0 1em 1em;
}
.accordion .theme>h3 {
color: #555555;
}
.accordion .theme:hover {
background-color: #ffff00;
cursor: pointer
}
.accordion .theme>h3.active {
color: #333333;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border: 0.3em solid transparent;
border-left-color: #555555;
content: "";
margin: 0 1.5em 0 1em;
}
</style>
</head>
<body>
<h1>Accordion Menu</h1>
<ul class="accordion">
<li>
<div class="theme">
<h3><b class="arrow"></b>Theme1</h3>
</div>
<div class="abstract">
<p>Consectetur nesciunt placeat laborum eos placeat eligendi quam! Iure tenetur officiis corporis excepturi quasi officiis beatae, placeat ea molestiae voluptatum fuga praesentium rem veritatis? Labore at similique provident nemo beatae.</p>
</div>
</li>
<li>
<div class="theme">
<h3><b class="arrow"></b>Theme2</h3>
</div>
<div class="abstract">
<p>Sit ab repellendus animi dolores in repudiandae amet reiciendis. Ipsum illo suscipit omnis mollitia repudiandae. Molestiae laborum nisi eos consequuntur dolores, impedit veritatis veritatis facere impedit laborum voluptatum fuga odio!</p>
</div>
</li>
<li>
<div class="theme">
<h3><b class="arrow"></b>Theme3</h3>
</div>
<div class="abstract">
<p>Amet molestias quas porro consectetur alias. Vero officia possimus perferendis perspiciatis odio! Dolorem reprehenderit quia omnis animi quas reprehenderit laboriosam molestiae. Eos eum assumenda consectetur expedita sapiente non debitis voluptatum.</p>
</div>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function(){
$('.accordion').find('.theme').click(function(){
$(this).next('.abstract').slideToggle('fast', function(){
var curr = $(this).prev('div').children('h3');
curr.toggleClass('active');
if (curr.hasClass('active')) {
curr.children('b').css({'border-top-color': '#333333', 'border-left-color': 'transparent'});
} else {
curr.children('b').css({'border-top-color': 'transparent', 'border-left-color': '#555555'});
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment