JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div class="selection">
    Special Appetizer 8.95 <br>
    Small Appetizer Plate 7.50
</div>
<p class="toggle">Appetizers</p>

<div class="selection">
    Broccoli & Cream Soup $5.50 <br>
    Clam Chowder 7.50
</div>
<p class="toggle">Soups</p>

<div class="selection">
    Fried Rice 4.95 <br>
</div>
<p class="toggle">Rice</p>

CSS

.selection,.toggle
{
    width: 700px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    marign-lift: auto;
    padding: 5px;
    background: white;
    border: solid 2px gray;
}
.toggle
{
    text-align: center;
}
.selection
{
    display: none;
    text-align: left;
}

JavaScript

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });
    
    $('.selection').click(function(){
        $(this).slideToggle("slow");
    });
});