Skip to content

Instantly share code, notes, and snippets.

@LouisWhit
Created June 12, 2019 02:05
Show Gist options
  • Save LouisWhit/a0a421f8c048240e02386d5a82807b39 to your computer and use it in GitHub Desktop.
Save LouisWhit/a0a421f8c048240e02386d5a82807b39 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Accordion - Item</title>
<style></style>
</head>
<body>
<div class="container container-fluid accordionPage">
<div class="row">
<div data-editor="html" data-title='Accordion Item' class="col-md-12 accordionItem">
<h2>Accordion Item</h2>
</div>
<div data-editor="html" data-title='Accordion Content' class="col-md-12 accordionCopy">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
</html>
$('.accordionCopy').hide();
$('.accordionItem').append('<i class="fa fa-plus-circle"></i>');
$('.accordionItem').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('open').parent().find(".accordionCopy").slideToggle("fast");
$(this).find('i').toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment