JSFiddle - React, Tailwind, and code Playground

by Peter Richards

HTML

<div id="support-content-holder">
    <div id="support-content-title" class="support-content-title">
        <div id="support-content-title-text">How do I connect my stylus to the iPad?</div>
    </div>
    <div id="support-content-body" class="hidden support-content-body">
        <div id="support-content-body-text">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
</div>
<div id="support-content-holder">
    <div id="support-content-title" class="support-content-title">
        <div id="support-content-title-text">How do I connect my stylus to the iPad2?</div>
    </div>
    <div id="support-content-body" class="hidden support-content-body">
        <div id="support-content-body-text">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
</div>

CSS

#support-wrapper {
	    width: 70%;
	    height: auto;
	    margin: 0 auto;
	    margin-top: 150px;
	}
	#support-content-holder {
	    width: 100%;
	    height: auto;
	    padding-bottom: 25px;
	}
	#support-content-title {
	    background-color: #66A4E4;
	    height: 40px;
	    color: white;
	    cursor: pointer;
	}
	#support-content-title-text {
	    padding: 10px 10px;
	    font-size: 18px;
	}
	#support-content-body {
	    background-color: #9AC3F1;
	    height: auto;
	}
	#support-content-body-text {
	    padding: 20px 20px;
	    font-size: 16px;
	    line-height: 19px;
	    font-weight: 300;
	    color: white;
	}
	.hidden {
	    display: none;
	}

JavaScript

jQuery(document).ready(function ($) {
    $(".support-content-title").click(function () {
        $(this).parent().children(".support-content-body").slideToggle(400);
    });
});