www.ambanadi.com
<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();

Leave a Reply

Your email address will not be published. Required fields are marked *