JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<div class="outbox">
    <p class="heading">Header-1</p>
    <div class="content">Lorem ipsum dolor sit amet</div>
    <p class="heading">Header-2</p>
    <div class="content">Lorem ipsum dolor sit amet</div>
    <p class="heading">Header-3</p>
    <div class="content">Lorem ipsum dolor sit amet</div>
</div>

CSS

.outbox {
    margin: 0;
    padding: 0;
}
.heading {
    clear: both;
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    float: right;
    width: 300px;
    height:25px;
}
.content {
    clear: both;
    float: right;
    background-color: #FFCCCC;
}

JavaScript

$(document).ready(function () {
    $(".content").hide();
    $(".heading").click(function () {
        $(this).next(".content").slideToggle("slow");
    });
});