JSFiddle - React, Tailwind, and code Playground
HTML
<div id="1">
<a href="#" class="byline">Share results</a>
<div class="toggle-content">
<ul class="crp-list">
<li>Combine</li>
<li>Control</li>
<li>Combine</li>
<li>Control</li>
<li>Combine</li>
<li>Control</li>
</ul>
</div>
</div>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<div id="2">
<a href="#" class="byline">Share results</a>
<div class="toggle-content">
<ul class="crp-list">
<li>Combine</li>
<li>Control</li>
<li>Combine</li>
<li>Control</li>
<li>Combine</li>
<li>Control</li>>
</ul>
</div>
</div>
CSS
.byline{
position:relative; /* required */
}
.byline:after {
transform: rotate(0deg);
content: ''; /* required */
position:absolute; /* required */
width: 50px; /* required, width of your arrow */
height: 50px; /* required, height of your arrow */
right: -100px; /* required, negative width + some padding */
top:0; /* required */
background: url('http://protoweb-dev.nicorelli.us/images/icons/slider_arrow_left.png') no-repeat;
}
.byline.exp:after {
transform: rotate(-90deg);
}
.byline:after{
transform: rotate(-90deg);
/* arrow as background here */
}
.byline.exp:after{
transform: rotate(0deg);
}
JavaScript
// expanding, collapsing div script
$(document).ready(function() {
$(".toggle-content").slideUp();
$(".byline").click(function() {
var $next = $(this).next(".toggle-content");
$('.byline').not(this).removeClass('exp');
$(".toggle-content").not($next).slideUp();
$next.slideToggle(500);
$(this).toggleClass('exp');
});
});