JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<div id="accordion">
  <section id="item1" class="ac_hidden">
    <p class="pointer">&#9654;</p><h1><a href="#">A long paragraph</a></h1>
    <p>Pellentesque habitant... </p>
  </section>
  <section id="item2" class="ac_hidden">
    <p class="pointer">&#9654;</p><h1><a href="#">A medium paragraph</a></h1>
    <p>Pellentesque habitant... </p>
  </section>
  <section id="item3" class="ac_hidden">
    <p class="pointer">&#9654;</p><h1><a href="#">Two short paragraphs</a></h1>
    <p>Pellentesque habitant... </p>
    <p>Pellentesque habitant... </p>
  </section>
</div>

CSS

#accordion section, #accordion .pointer, #accordion h1, #accordion p {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
#accordion {
  margin-bottom:30px;
}
#accordion h1 {
  line-height:1.2;
  font-size:20px;
  background-color:rgba(255,0,0,0.3);
  margin:0;
  padding: 10px 10px 10px 30px;
}

#accordion h1 a {
  color:black;
}
#accordion section {
  overflow:hidden;
  height:220px;
  border:1px #333 solid;
}
#accordion p {
  padding:0 10px;
  color:black;
}
#accordion section.ac_hidden p:not(.pointer) {
  color:#fff;
}

#accordion section.ac_hidden {
  height:44px;
}
#accordion .pointer {
  padding:0;
  margin:10px 0 0 6px;
  line-height:20px;
  width:13px;
  position:absolute;
}
#accordion section:not(.ac_hidden) h1 {
  background-color:rgba(255,0,0,0.7);
}

#accordion section:not(.ac_hidden) .pointer {
  display:block;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  padding:0;
}

JavaScript

$("#accordion section h1").click(function(e) {
    
    var a = $(this).parents("section").hasClass("ac_hidden");
    if(a==true) {
				$(this).parents().siblings("section").addClass("ac_hidden");
    		$(this).parents("section").removeClass("ac_hidden");
    } else {
    		$(this).parents("section").addClass("ac_hidden");
    }
    e.preventDefault();
});