<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <style>
    body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figcaption, img, a {margin:0; padding:0; text-decoration: none; list-style: none;}
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;700;900&display=swap');
    
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
    .detalis_img {width: 1500px; height: 3800px; margin: 0 auto; border-left: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc;}
       
    .detalis_sub1 {width: 1500px; height: auto; margin: 0 auto; border-right: 1px solid #bcbcbc; border-left: 1px solid #bcbcbc;}
    .detalis_sub2 {text-align: center; width: 1500px; height: 80px; border: 1px solid #bcbcbc; margin-left: -1px; font-family: 'GmarketSansLight'; font-size: 28px; line-height: 80px}
    .detalis_sub3 {font-family: 'Noto Sans KR', sans-serif; font-size: 25px; display: none; width: 1500px; height: 1100px; border-left: 1px solid #bcbcbc; border-top: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc; margin-left: -1px;}
       
    .detalis_sub4 {width: 1500px; height: auto; margin: 0 auto;}
    .detalis_sub5 {text-align: center; width: 1500px; height: 80px; border: 1px solid #bcbcbc; margin-left: -1px; font-family: 'GmarketSansLight'; font-size: 28px; line-height: 80px}
    .detalis_sub6 {width: 1500px; height: 10500px; border-left: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc; margin-left: -1px; display: none; border-top: 1px solid #bcbcbc;}
    
       .detalis_sub7 {width: 1500px; height: auto; margin: 0 auto;}
       .detalis_sub8 {text-align: center; width: 1500px; height: 80px; border: 1px solid #bcbcbc; margin-left: -1px; font-family: 'GmarketSansLight'; font-size: 28px; line-height: 80px;}
       .detalis_sub9 {width: 1500px; height: 2050px; border-left: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc; margin-left: -1px; display: none; border-top: 1px solid #bcbcbc;}
</style>

<div class="detalis_img">
    <div><img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/01_daboss_white.jpg"></div>
</div>

<div class="detalis_sub1">
    <div class="detalis_sub2">FEATURE POINT<img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png" style="vertical-align: middle; padding-left: 20px" class="common_button1">
        <div class="detalis_sub3">
            <img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/common1.jpg" alt="">
        </div>
    </div>
</div>

<div class="detalis_sub4">
    <div class="detalis_sub5">INSIDE - COMPOSITION<img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png" style="vertical-align: middle; padding-left: 20px" class="common_button2">
        <div class="detalis_sub6">
            <img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/common2.jpg" alt="">
        </div>
    </div>
</div>

<div class="detalis_sub7">
    <div class="detalis_sub8">PRECAUTIONS<img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png" style="vertical-align: middle; padding-left: 20px" class="common_button3">
        <div class="detalis_sub9">
            <img src="http://behom.cafe24.com//bizdemo39562/img/slide_details/common3.jpg" alt="">
        </div>
    </div>
</div>

<script>
$(function(){
  $('.common_button1').click(function(e){
      $('.detalis_sub3').slideToggle();
      $('.common_button1').toggleClass("open")
      
      if($(".common_button1").hasClass("open")){
                //open이 있을 때
                $(".common_button1").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/close.png");
            } else {
                //open이 없을 때
                $(".common_button1").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png");
            }
  });
});
</script>


<script>
$(function(){
  $('.common_button2').click(function(e){
      $('.detalis_sub6').slideToggle();
      $('.common_button2').toggleClass("open")
      
      if($(".common_button2").hasClass("open")){
                //open이 있을 때
                $(".common_button2").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/close.png");
            } else {
                //open이 없을 때
                $(".common_button2").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png");
            }
  });
});
</script>


<script>
$(function(){
  $('.common_button3').click(function(e){
      $('.detalis_sub9').slideToggle();
      $('.common_button3').toggleClass("open")
      
      if($(".common_button3").hasClass("open")){
                //open이 있을 때
                $(".common_button3").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/close.png");
            } else {
                //open이 없을 때
                $(".common_button3").attr("src","http://behom.cafe24.com//bizdemo39562/img/slide_details/open.png");
            }
  });
});
</script>

우선 코드구요

페이지 하단 부분에 탭이 3개가 있습니다

탭에있는 +를 누르면 숨어있던 내용들이 나오면서 그 내용이 보여지게 하는건데

첫번째 탭의 +를 누르면 밑에있는 탭을 밀어낼줄 알았는데 그러지않고 그 탭에 포함이 되버리더라구요 ㅜ

왜 그렇게 되는지를 모르겠습니다 혹시 아시는분 계시면 도움좀 주시면 감사하겠습니다!