JSFiddle - React, Tailwind, and code Playground
HTML
<dl class="accordion">
<dt id="accord1"><a href=""><span>+</span>Mobile Access</a></dt>
<dd>Access anytime, anywhere, to quickly and easily find a doctor or look up a claim. </dd>
<dt id="accord2"><a href=""><span>+</span>Payment Estimator</a></dt>
<dd>Estimate costs before seeing a doctor. Plan for costs ahead of time and, feel more confident about your health care decisions.</dd>
<dt id="accord3"><a href=""><span>+</span>Health Resource</a></dt>
<dd>Secure health search engine that provides personalized access to all health care topics, based on your profile. </dd>
</dl>
CSS
body {
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size: 16px;
}
dl.accordion {
width: 830px;
border: 1px solid #dcdcdc;
}
dt, dd {
padding: 4px 12px;
}
dt {
background-color:#309821;
color: #0ba2c3;
border-top: 2px solid #dcdcdc;
}
dt:first-of-type {
border-top: 0 none;
}
dt a {
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size: 21px;
display: block;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
dt span {
width: 18px;
height: 18px;
display: inline-block;
margin-top: 0px;
margin-right: 12px;
padding: 0px;
font-size: 26px;
line-height: 22px;
font-weight: 400;
float: left;
}
dd {
border-top: 0;
font-size: 16px;
line-height: 21px;
margin-left:0;
}
dd:last-of-type {
position: relative;
top: -1px;
}
JavaScript
$(document).ready(function() {
var allPanels = $('.accordion > dd').hide();
var allControlIcons = $('.accordion > span');
var urlString = $(location).attr('hash').slice(1);
var startN = (parseInt(urlString))-1; // minus one to make it zero based for the eq: numbering
console.log(startN);
$('.accordion dd:eq('+startN+')').addClass('active').show();
$('.accordion dt:eq('+startN+')').find('span').
empty().html('–');
$('.accordion > dt > a').click(function() {
$this = $(this);
$target = $this.parent().next();
$control = $this.find('span');
$('.accordion').find('span').empty().html('+');
$this.closest('dt').find('span').empty().html('–');
if(!$target.hasClass('active')){
allPanels.removeClass('active').slideUp("fast");
$target.addClass('active').slideDown("fast");
}
return false;
});
});