JSFiddle - React, Tailwind, and code Playground

by kohei horiguchi

HTML

<div class="body">
    <div class="head">
        headA
    </div>
    <div class="contents">
        contentsB
    </div>
</div>
<div class="body">
    <div class="head">
        headB
    </div>
    <div class="contents">
        contentsC
    </div>
</div>
<div class="body">
    <div class="head">
        headC
    </div>
    <div class="contents">
        contentsD
    </div>
</div>

JavaScript

//contentsクラスを別々にhideからshowにする

jQuery(function(){
    jQuery(".head").each(function(e,v){
        jQuery(v).next().hide();
        
        //showにしたものをhideしたい時はやり方が色々あるので
        //好きなのを探してもらえば良いと思いますが、一例として出しておきます。
        //コメントアウトした奴を外せばhideとshowの切り替えができます。
        
        jQuery(v).click(function(){
        //    flg = jQuery(this).next().css("display") == "none";
        //    if(flg) {
                jQuery(this).next().show();
        //    } else {
        //        jQuery(this).next().hide();                
        //    }
        });
    });
});