[jQuery]table 클릭 시 하위 숨김 컨텐츠 - open close

1. html

<table id="listTable" class="recruit">
<thead>
  <tr>
    <th>No.</th>
    <th>구분 <button class="upDownBtn" type='button' onclick='sortTable()'></button></th>
    <th>발신자</th>
    <th>관련 업무 경험</th>
    <th>획득 숙련도</th>
    <th>요청 제목</th>
    <th>요청일<button class="upDownBtn" type='button' onclick='sortTable()'></button></th>
    <th>완료일<button class="upDownBtn" type='button' onclick='sortTable()'></button></th>
    <th>답변상태<button class="upDownBtn" type='button' onclick='sortTable()'></button></th>
    <th>진행상황<button class="upDownBtn" type='button' onclick='sortTable()'></button></th>
    <th><span class="downIcon"></span></th>
  </tr>
</thead>
<tbody>
  <tr class="item even">
    <td>내용</td>
    <td>내용</td>
    <td>내용</td>
    <td>내용</td>
    <td class="pl24"><span class="tableDownIcon"></span>0.1</td>
    <td>내용</td>
    <td>2023년 05월</td>
    <td>2023년 05월</td>
    <td class="unansweredAnswer">미답변</td>
    <td>진행중</td>
    <td><span class="downIcon"></span></td>
  </tr>
  <tr class="hide">
    <td colspan="11">
      <div class="tableInnerSection">
        <div class="tableInnerContents">
          <div class="innerContent2">
            <div class="innerTextContent dfr">
              <div class="img"><img src=""></div>
              <ul>
                <li>관련업무경험
                  <ul>
                    <li>내용</li>
                    <li>내용</li>
                    <li>내용</li>
                    <li>내용</li>
                    <li>내용</li>
                  </ul>
                </li>
                <li>숙련도
                  <ul>
                    <li>내용2</li>
                    <li>내용</li>
                    <li>내용</li>
                    <li>내용</li>
                    <li>내용</li>
                  </ul>
                </li>
              </ul>
              <button class="successBtn" type="button">
                <span>완료</span>
              </button>
            </div>
          </div>
          <div class="innerContent2">
            <div class="innerTextContent dfd">
              <p>내용</p>
              <p>내용</p>
                <div class="textMessage">
                  <textarea name="" id="" cols="30" rows="10" placeholder="내용을 입력해 주세요." style="resize: none;"></textarea>
                  <button class="sendMessageBtn" type="button">
                    <span>메세지 보내기</span>
                  </button>
                </div>
            </div>
          </div>
        </div>
      </div>
    </td>
  </tr>
</tbody>
</table>

2. css

table, tr, th, td{height: 44px;}
th, td{padding-left: 12px; position: relative;}
table{width: 100%; border-radius: 12px; border-collapse: separate; border-spacing: 0;}
table .selected{background-color: #CBC8C2;}
thead tr th{border: 1px solid #CBC8C2; border-left: none;}
tbody{cursor: pointer;}
tbody tr td{border-right: 1px solid #E6E1D6; border-bottom: 1px solid #E6E1D6;}
tbody tr:hover td{border-right: 1px solid #CBC8C2;}

thead tr th:last-child{border-right: 1px solid #CBC8C2;}
tbody tr td:first-child{border-left: 1px solid #CBC8C2;}
tbody tr:last-child td{border-bottom: 1px solid #CBC8C2;}
tbody tr td:last-child{border-right: 1px solid #CBC8C2;}
thead tr th:first-child{border-left: 1px solid #CBC8C2;}

.even{background-color:#F6F2ED;}
thead > tr{background-color:#E6E1D6; text-align: left;}
tbody > tr:hover{background-color: #E6E1D6;}
tbody > td:hover{border: 1px solid #E6E1D6;}

thead > tr > th:first-child{border-radius: 12px 0 0 0;}
thead > tr > th:last-child{border-radius: 0 12px 0 0;}
tbody > tr:last-child > td:first-child{border-radius:0 0 0 12px;}
tbody > tr:last-child > td:last-child{border-radius:0 0 12px 0;}
.tableInnerSection{padding: 20px;}

.tableInnerSection .tableInnerContents{display: flex; gap: 12px; justify-content: center; align-items: center;}
.tableInnerSection .tableInnerContents .innerContent{background-color:#F8EFE7; border: 1px solid #CBC8C2;width: 440px; height: 342px; border-radius: 12px;}
.tableInnerSection .tableInnerContents .innerContent:nth-child(even){background-color:#ede2dc;}
.tableInnerSection .tableInnerContents .innerImgContent{width: 100%;}
.tableInnerSection .tableInnerContents .innerImgContent > img{margin: 0 auto; display: block;}
.tableInnerSection .tableInnerContents .innerTextContent{background-color: #fff; padding: 20px; border-radius: 0 0 12px 12px;}
.tableInnerSection .tableInnerContents .innerTextContent .mainTit{font-size: 24px; font-weight: 600;}
.tableInnerSection .tableInnerContents .innerTextContent .subTit{font-size: 16px; font-weight: 600; margin: 8px 0;}
.tableInnerSection .tableInnerContents .innerTextContent .subTit .subInner{font-size: 16px; font-weight: 400; position: relative; margin-left: 16px;}
.tableInnerSection .tableInnerContents .innerTextContent .subTit .subInner:before{content: ''; display: block; position: absolute; width: 1px; height: 12px; background-color: #CBC8C2; left: -9px; top: 4px;}
.tableInnerContents .innerContent2{width: 50%;}

3. jQuery

$(document).ready(function(){
    // table
    // $("#listTable tbody tr:nth-child(even)").css("background", "#F6F2ED");
    $('#listTable tbody').on('click', 'tr', function(){
      $(this).toggleClass('selected');
    });

    // hide
    var article = ('.recruit.show');
    $('.recruit .item td').click(function(){
      var myArticle = $(this).parents().next("tr");
      if($(myArticle).hasClass('hide')) {
        $(article).removeClass('show').addClass('hide');
        $(myArticle).removeClass('hide').addClass('show');
      } else {
        $(myArticle).addClass('hide').removeClass('show');
      }
    });
  });