JSFiddle - React, Tailwind, and code Playground

by kim seok ki

HTML

<section class="container is-max-desktop afms-wrap afms-wrap__input">
        <div class="pt-5">
            <div class="box afms-box" onClick="">
                <article class="is-relative">
                  <div class="media-content mb-3">
                    <div class="content mb-3">
                      <div class="is-flex is-align-items-center">
                        <span class="afms_tag1">영선</span>
                        <span class="card_title mt-0 ml-1">정기회의 회의록</span>
                        <a class="card_arrow" id="arrowBtn">
                          <span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;">open</span>
                        </a>
                      </div>
                      <p class="has-text-grey-light mt-1">HOW0021-A1</p>
                    </div>
                    <div class="content is-inline-block mr-5 mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
                      </p>
                  </div>
                  <div class="content is-inline-block mb-0" >
                      <p class="card_detail">
                          <span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
                      </p>
                  </div>
                  </div>
                  <div class="media-content media-content__detail mb-3 hide">
                    <table class="table is-fullwidth has-text-centered">
                      <thead>
                        <tr>
                          <th>위치</th>
                          <th>세부위치</th>
                          <th>수량</th>
                          <th>수량</th>
                        </tr>
                      </thead>
                      <tfoot>
       ...

CSS

.media-content__detail{display:none;}
.card_detal__btn{display:inline-block;}

JavaScript

$(document).ready(function(){
        $(".card_detal__btn").click(function(){

          event.stopPropagation();
            var submenu = $(this).parents().children(".media-content__detail");
            if( submenu.is(":visible") ){
              $(this).css("transform","rotate(0deg)");
                submenu.slideUp();
            }else{
              $(this).css("transform","rotate(180deg)");
                submenu.slideDown();
            }
        });
       
    });