JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slide0"><h3>Category 1<div class="tri0"></div></h3></div>
<div class="view0">
This text in this category is revealed already when the page loads.
</div>
<div class="slide1"><h3>Category 2<div class="tri1"></div></h3></div>
<div class="view1">
The text in this category is hidden until user clicks the Category 2 heading.
</div>
CSS
.slide0, .slide1 {
cursor: pointer;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
width: 90%;
border: 1px solid black;
background-color: #FFFF99;
margin-bottom: 20px;
}
h3 {
font-size: 16px;
margin: 1px auto;
padding: 10px 15px 10px 10px;
}
.tri0 {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
float: right;
-moz-transition: -moz-transform .3s;
-webkit-transition: -webkit-transform .3s;
-o-transition: -o-transform .3s;
transition: transform .3s;
}
.tri1 {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
float: right;
-moz-transition: -moz-transform .3s;
-webkit-transition: -webkit-transform .3s;
-o-transition: -o-transform .3s;
transition: transform .3s;
}
.toggle0 {
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle1 {
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
JavaScript
$(document).ready(function(){
$("div.view1").hide();
//watch for clicks on the "slide0" banner
$("div.slide0").click(function(){
$("div.view0").slideToggle(400);
$("div.tri0").toggleClass("toggle0");
});
//watch for clicks on the "slide1" banner
$("div.slide1").click(function(){
$("div.view1").slideToggle(400);
$("div.tri1").toggleClass("toggle1");
});
});