JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<a href="javascript:void(0);" id="opne-check-sheat">体質チェックシートを開く</a>

<div class="form_check_sheet">
<div class="form_check_box purple">
<div class="left">気滞体質</div>
<div class="right"><span class="wpcf7-form-control-wrap check-group01"><span class="wpcf7-form-control  wpcf7-checkbox"><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="不安や憂鬱、又はイライラ、怒りっぽい。" />&nbsp;<span class="wpcf7-list-item-label">不安や憂鬱、又はイライラ、怒りっぽい。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="片頭痛がよく起こる。" />&nbsp;<span class="wpcf7-list-item-label">片頭痛がよく起こる。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="喉に物が詰まった様な不快感がある。" />&nbsp;<span class="wpcf7-list-item-label">喉に物が詰まった様な不快感がある。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="お腹が張り、ゲップやガスが多い。" />&nbsp;<span class="wpcf7-list-item-label">お腹が張り、ゲップやガスが多い。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="下痢と便秘を交互に繰り返す。" />&nbsp;<span class="wpcf7-list-item-label">下痢と便秘を交互に繰り返す。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="生理の周期が不順、又は生理前に乳房や腹部が張る。" />&nbsp;<span class="wpcf7-list-item-label">生理の周期が不順、又は生理前に乳房や腹部が張る。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="眠れない、夢が多い。" />&nbsp;<span class="wpcf7-list-item-label">眠れない、夢が多い。</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="check-group01[]" value="舌は両端が赤い、苔がある。" />&nbsp;<span class="wpcf7-list-item-label">舌は両端が赤い、苔がある。</span></label></span></span></span></div>
</div>
<div class="form_check_box blue">
<div class="left">瘀血体質</div>
<div class="right"><span class="wpcf7-form-control-wrap check-group02"><span class="wpcf7-form-control ...

CSS

.form_check_sheet {
    display:none;
}

JavaScript

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('.form_check_sheet').stop(true, true).slideToggle();
    });
});