JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<div class="css-accordion">
  <h3>Een lange accord titel. Die misschien toch echt heel lang gaat worden om puur te testen
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="101.334px" height="103px" viewBox="0 0 101.334 103" enable-background="new 0 0 101.334 103" xml:space="preserve">
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="50.667" cy="51.5" r="47"/>
<path stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M75,51.499c0,1.879-1.573,3.401-3.514,3.401H29.849
	c-1.94,0-3.516-1.522-3.516-3.401l0,0c0-1.879,1.575-3.401,3.516-3.401h41.638C73.427,48.098,75,49.62,75,51.499L75,51.499z"/>
<path class="rotation" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M50.667,75.833c-1.879,0-3.402-1.573-3.402-3.514V30.682
	c0-1.941,1.523-3.516,3.402-3.516l0,0c1.878,0,3.4,1.574,3.4,3.516v41.638C54.067,74.26,52.545,75.833,50.667,75.833L50.667,75.833z
	"/>
</svg>
  </h3>
  <div class="accordWrapper">
    <div class="accord">
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
      <p>Hier komt een bericht te staan of wat je ook maar wilt</p>
    </div>
  </div>
    <h3>Accord Titel
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="101.334px" height="103px" viewBox="0 0 101.334 103" enable-background="new 0 0 101.334 103" xml:space="preserve">
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="50.667"...

SCSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Open Sans', sans-serif;
}

.css-accordion{
  background:white;
  float:left;
  width:100%;
  max-width:600px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  h3{
    position:relative;
    float: left;
    width: 100%;
    font-size: 22px;
    color: black;
    font-weight:700;
    padding: 20px 75px 20px 25px;
    cursor:pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #eaeaea;
    &:last-of-type{
      border-bottom: 0px solid #eaeaea;
    }
    &.show{
      border-bottom: 1px solid #eaeaea;
      svg{
        transform: rotate(180deg);
        path.rotation{
          transform: rotate(90deg);
        }
      }
    }
    &:hover{
      background: #fdfdfd;
    }
    &:active{
      background: #f3f3f3;
    }
    svg{
      position:absolute;
      right:25px;
      top:50%;
      margin-top:-12.5px;
      width:25px;
      height:25px;
      transform: rotate(0deg);
      transform-origin:center;
      transition:all 0.3s ease;
      circle{
        stroke-width:5;
      }
      path.rotation{
        transform: rotate(0deg);
        transition: all 0.3s ease;
        transform-origin:center;
      }
    }
  }
  .accordWrapper{
    max-height:0px;
    perspective: 1000px;
    overflow:hidden;
    transition: all 0.5s ease;
    float:left;
    width:100%;
    border-bottom: 0px solid #eaeaea;
    &.show{
      border-bottom: 1px solid #eaeaea;
      .accord{
        transform: translateY(0px);
      }
    }
  }
  .accord{
    padding: 20px 25px;
    float:left;
    width:100%;
    transform: translateY(-30px);
    transition: all 0.5s ease;
  }
}

JavaScript

$(".css-accordion h3").on('click', function(){
	var getHeight = $(this).next().find('.accord').outerHeight();
  
  if($(this).hasClass('show')){
  	$(this).removeClass('show')
    			 .next()
           .removeClass('show')
           .css({"max-height": 0});
  } else {
  	$(this).addClass('show')
    			 .next()
           .addClass('show')
           .css({"max-height": getHeight});
  }
  
});