JSFiddle - React, Tailwind, and code Playground

by sachips

HTML

<div class="slideBox">
    <div class="open">
        ここをクリックするとスライドして開きます。
    </div>
    <div class="slideContent">
        コンテンツをここに記述します。<br>
        もちろんHTMLを記述できるので何だって表現できます。<br>
        もう一度クリックするとスライドを閉じます。
    </div>
</div>

CSS

.open {
    background-color: #FFCC33;
    padding: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}
.slideContent {
    display: none;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
}

JavaScript

$(function(){
    $(".open").click(function(){
        $(this).next(".slideContent").slideToggle("slow");
    });
});