"animated accordion"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <div class="accordion"> <h2 class="accordion__title">animated Accordion!</h2> <ul class="accordion__list"> <li class="accordion__item"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Chartreuse drinking vinegar</h3> <div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div> </div> <div class="accordion__itemContent"> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> </div> </li> <li class="accordion__item"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Hoodie pabst trust fund fap organic</h3> <div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div> </div> <div class="accordion__itemContent"> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> </div> </li> <li class="accordion__item"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Keytar synth salvia cred</h3> <div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div> </div> <div class="accordion__itemContent"> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> </div> </li> <li class="accordion__item"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Hashtag jean short</h3> <div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div> </div> <div class="accordion__itemContent"> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p> <p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p> </div> </li> </ul> </div>
html { height: 100%; } body { font-family: Helvetica, arial, sans-serif; background-color: #000; height: 100%; background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%); } .accordion { max-width: 500px; margin: 0 auto; } .accordion__title { font-family: 'industry', sans-serif; font-weight: 300; color: #fff; text-transform: uppercase; font-size: 1.125em; } .accordion__list { list-style: none; margin: 0; padding: 0; } .accordion__item { border-bottom: 1px solid #000; visibility: hidden; } .accordion__item:last-child { border-bottom: 0; } .accordion__item.is-active .accordion__itemTitleWrap::after { -webkit-transform: translateX(-20%); transform: translateX(-20%); } .accordion__item.is-active .accordion__itemIconWrap { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .accordion__itemTitleWrap { display: flex; height: 2.5em; align-items: center; padding: 0 1em; color: #fff; cursor: pointer; position: relative; overflow: hidden; } .accordion__itemTitleWrap::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: #3bade3; background: linear-gradient(45deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%); z-index: 1; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .accordion__itemTitleWrap.is-active::after, .accordion__itemTitleWrap:hover::after { -webkit-transform: translateX(-20%); transform: translateX(-20%); } .accordion__itemIconWrap { width: 1.25em; height: 1.25em; margin-left: auto; position: relative; z-index: 10; } .accordion__itemTitle { margin: 0; font-family: 'industry', sans-serif; font-weight: 300; font-size: 1em; position: relative; z-index: 10; } .accordion__itemContent { font-size: 0.875em; height: 0; overflow: hidden; background-color: #fff; padding: 0 1.25em; } .accordion__itemContent p { margin: 2em 0; }
var Accordion = function() { var toggleItems, items; var _init = function() { toggleItems = document.querySelectorAll('.accordion__itemTitleWrap'); toggleItems = Array.prototype.slice.call(toggleItems); items = document.querySelectorAll('.accordion__item'); items = Array.prototype.slice.call(items); _addEventHandlers(); TweenLite.set(items, {visibility:'visible'}); TweenMax.staggerFrom(items, 0.9,{opacity:0, x:-100, ease:Power2.easeOut}, 0.3) } var _addEventHandlers = function() { toggleItems.forEach(function(element, index) { element.addEventListener('click', _toggleItem, false); }); } var _toggleItem = function() { var parent = this.parentNode; var content = parent.children[1]; if(!parent.classList.contains('is-active')) { parent.classList.add('is-active'); TweenLite.set(content, {height:'auto'}) TweenLite.from(content, 0.6, {height: 0, immediateRender:false, ease: Back.easeOut}) } else { parent.classList.remove('is-active'); TweenLite.to(content, 0.3, {height: 0, immediateRender:false, ease: Power1.easeOut}) } } return { init: _init } }(); Accordion.init();

Related: See More


Questions / Comments:

Switch between tabs and the accordions don't show Oo`

Bmuzammil (-4) - 1 year ago - Reply -3


How would I get this animated accordion to work inside of Meteor?

Cassiopeia19 () - 10 months ago - Reply 0