JSFiddle - React, Tailwind, and code Playground
HTML
<dl id="accordian">
<dt><a href="#" class="active"> Link to slide down dd </a></dt>
<dd> Text to drop down </dd>
<dt><a href="#"> Link to slide down dd </a></dt>
<dd> Text to drop down </dd>
<dt><a href="#"> Link to slide down dd </a></dt>
<dd> Text to drop down </dd>
</dl>
CSS
#accordian dt {
position: relative;
padding-left: 20px;
background-color: green;
}
#accordian a::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 2px;
left: 3px;
background-image: -webkit-linear-gradient(top left, #000, #000 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(top left, #000, #000 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(top left, #000, #000 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(top left, #000, #000 50%, transparent 50%, transparent);
background-image: linear-gradient(top left, #000, #000 50%, transparent 50%, transparent);
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
}
#accordian a.active::before {
top: 4px;
transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
JavaScript
$(document).ready(function() {
//Thermal Coatings page - Accordian
$('#accordian dd').hide();
$('#accordian a.active').parent().next('dd').show();
$('#accordian a').click(function(){
$('#accordian a').removeClass('active');
$(this).addClass('active');
$('#accordian dd').slideUp();
$(this).parent().next('dd').slideDown();
});
});