JSFiddle - React, Tailwind, and code Playground

by ejay

HTML

<dl class="accordion">

<dt id="accord1"><a href=""><span>&#43;</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>&#43;</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>&#43;</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
  if (!window.console){ console = {log: function() {}} };
  
  $('.accordion dd:eq('+startN+')').addClass('active').show();
  $('.accordion dt:eq('+startN+')').find('span').
  empty().html('&#8211;');
  
    
  $('.accordion > dt > a').click(function() {
      $this = $(this);
      $target =  $this.parent().next();
	  $control = $this.find('span');

	  $('.accordion').find('span').empty().html('&#43;');
	  $this.closest('dt').find('span').empty().html('&#8211;');

      if(!$target.hasClass('active')){
		  
         allPanels.removeClass('active').slideUp("fast");
         $target.addClass('active').slideDown("fast");
		 
      } 
      
    return false;
  });
});