JSFiddle - React, Tailwind, and code Playground

by gvolkerding

HTML

<div class="accordion">

		<div class="accordion-section"><a class="accordion-section-title" href="#how1">How can I insert a question in this spot when we come up with content?</a>
			<div id="how1" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end .accordion-section-content-->
		</div><!--end .accordion-section-->

		<div class="accordion-section"><a class="accordion-section-title" href="#accordion-2">How can I insert a question in this spot when we come up with content?</a>
			<div id="accordion-2" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end .accordion-section-content-->
		</div><!--end .accordion-section-->

		<div class="accordion-section"><a class="accordion-section-title" href="#accordion-3">How can I insert a question in this spot when we come up with content?</a>
			<div id="accordion-3" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end .accordion-section-content-->
		</div><!--end .accordion-section-->

		<div class="accordion-section"><a class="accordion-section-title" href="#accordion-4">How can I insert a question in this spot when we come up with content?</a>
			<div id="accordion-4" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end .accordion-section-content-->
		</div><!--end .accordion-section-->

		<div class="accordion-section"><a class="accordion-section-title" href="#accordion-5">How can I insert a question in this spot when we come up with content?</a>
			<div id="accordion-5" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end .accordion-section-content-->
		</div><!--end .accordion-section-->

		<div class="accordion-section"><a class="accordion-section-title" href="#accordion-6">How can I insert a question in this spot when we come up with content?</a>
			<div id="accordion-6" class="accordion-section-content">
			Lorem ipsum dolor sit amet, 
			</div><!--end...

CSS

/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
 
.accordion {
    overflow:hidden;
   margin-bottom: 40px;

}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:17px;
    display:inline-block;
    border-bottom:1px solid #e7e7e7;
    background:none;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.000em;
   
    color:#00438c;
font-family:'HelveticaNeueW01-45Ligh';

}
 .accordion-section-title a:hover {
color: #fff !important;
}
.accordion-section-title > a:focus {
color: #fff !important;
}
.accordion-section-title.active, .accordion-section-title:hover {
    background:#e7e7e7;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
    color: #3b3b3b;
    font-size: 14px;
    line-height: 20px;
}

JavaScript

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
 
     
});