팬더다이녀석들아
296
2021-02-23 16:34:46
3
188
#875171 Tech Q&A 아코디언 탭메뉴 자바스크립트 아코디언메뉴

선배님들 자바스크립트 도움좀 주실수 있을까요? 


<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;
}
    
    .b_closet_part1 {width: 100%; height: 280px; text-align: center; border-bottom: 1px solid black;}
    .closet_part_sub1 {font-family: 'GmarketSansBold'; font-size: 40px; padding-top: 100px;}
    .closet_part_sub2 {font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 300; padding-top: 10px;}
    
    .btn{padding:0;background:transparent;border:0;outline:0;}
.clearfix::after{display:block;clear:both;}

.tab_wrap{width:1500px; height:205px; margin: 0 auto;}
.tab_wrap .btn_tab{float:left;width:250px;height:205px;background:#eeeeee;text-align:center;line-height:30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 20px; border-left: 1px solid black; border-bottom: 1px solid black;}
.btn_tab:last-child{border-right: 1px solid black;}
.btn_tab:first-child{border:none;}
.tab_wrap .btn_tab.act{background:#dcdcdc;font-weight:bold; border-bottom: 2px solid black;}
.tab_wrap .content_area{display:none; width:1500px; min-height:auto; background:#fff; border-right: 1px solid black;}
.tab_wrap .content_area.act{display:block}
.tab_wrap *[data-depth="1"]{background:}
.tab_area {border-left: 1px solid #000;}
    
.accordion { overflow: hidden; width: 2560px; height: 580px; border: 1px solid #333; background-color: #000; margin: 0 -530px;}
.accordion a, .accordion div { float: left;}
.accordion a {  width: 130px; height: 580px; background: #000; color: #fff; border-left: 1px solid #666; border-right: 1px solid #666;}
.accordion a:first-child {margin-left: 529px;}
.accordion a.current { background: #000; color: #fff; }
.accordion .acdCon { display: none; width: 972px; height: 580px;}
.accordion .acdCon div { width: 972px; }
    
    .acdCon1 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new1.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon2 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new2.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon3 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new3.jpg'); width: 972px; height: 580px; color: #fff;}
    .acdCon4 {background-image: url('http://behom.cafe24.com//bizdemo39562/img/new4.jpg'); width: 972px; height: 580px; color: #fff;}
    
    .acd_textbox {transform: rotate(90deg); width: 200px; padding-top: 100%; padding-left: 50%;}
    .acd_text1 {font-family: 'GmarketSansLight'; font-size: 20px;}
    .acd_text2 {font-family: 'Noto Sans KR', sans-serif; font-size: 15px;}
    
    .acdCon1_sub1 {padding: 200px 30px 0 50px; font-family: 'GmarketSansMedium'; font-size: 40px;}
    .acdCon1_sub2 {padding: 10px 30px 0 50px; font-family: 'Noto Sans KR', sans-serif; font-size: 17px;}
    
    a {cursor: pointer;}
    
    .btn_none {background-color: #fff !important; border-left: none !important; border-right: none !important; height: 100px;}
    .bottom_none {border-bottom: none !important;}
    
    .pro_main {width: 1500px;}
    .pro_main > div {width: 330px; height: 225px; float: left; background-color: #eee; margin: 85px -45px 85px 155px}
    
    .pro_slide1 {font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-top: 15px;}
    .pro_slide2 {font-family: 'Noto Sans KR', sans-serif; font-weight: 900; font-size:20px;}
</style>

<div><img src="http://widat.cafe24.com//behom/boot/boot1.jpg" width="100%"></div>
<div class="b_closet_part1">
    <div class="closet_part_sub1">CLOSET</div>
    <div class="closet_part_sub2">붙박이장</div>
</div>

<div class="tab_wrap tab_area">
  <div class="btn_area clearfix">
    <button class="btn btn_tab act bottom_none" data-depth="0" data-idx="0">슬라이드</button>
    <button class="btn btn_tab bottom_none" data-depth="0" data-idx="1">여닫이</button>
    <button class="btn btn_tab bottom_none" data-depth="0" data-idx="2">드레스룸</button>
    <button class="btn btn_tab bottom_none" data-depth="0" data-idx="3">엔드리스</button>
    <button class="btn btn_tab bottom_none" data-depth="0" data-idx="4">신발장</button>
    <button class="btn btn_tab bottom_none" data-depth="0" data-idx="5">거실장</button>
  </div>
  
    <div class="accordion">
        <a>
            <div class="acd_textbox">
                <div class="acd_text1">SLIDING SYSTEM</div><br>
                <div class="acd_text2">슬라이딩</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon1">
               <div class="acdCon1_sub1">SLIDING SYSTEM</div>
               <div class="acdCon1_sub2">공간 활용도가 높은 슬라이드 도어</div>
            </div>
		</div>
		<a>
            <div class="acd_textbox">
                <div class="acd_text1">SWING SYSTEM</div><br>
                <div class="acd_text2">여닫이</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon2">
               <div class="acdCon1_sub1">SWING SYSTEM</div>
               <div class="acdCon1_sub2">모두에게 사랑받는 여닫이 도어</div>
            </div>
		</div>
		<a>
		    <div class="acd_textbox">
                <div class="acd_text1">DRESS ROOM</div><br>
                <div class="acd_text2">드레스룸 / 엔드리스</div>
            </div>
		</a>
		<div class="acdCon">
			<div class="acdCon3">
			    <div class="acdCon1_sub1">DRESS ROOM</div>
                <div class="acdCon1_sub2">공간 활용도가 높은 드레스룸 시스템</div>
			</div>
		</div>
		<a>
            <div class="acd_textbox">
                <div class="acd_text1">LIVING SYSTEM</div><br>
                <div class="acd_text2">신발장 / 거실장</div>
            </div>
        </a>
		<div class="acdCon">
			<div class="acdCon4">
			    <div class="acdCon1_sub1">LIVING SYSTEM</div>
                <div class="acdCon1_sub2">실내공간 인테리어의 중요성<br>리빙 시스템</div>
			</div>
		</div>
    </div>
 
  <div class="content_area act" data-depth="0" data-idx="0">
      <div class="tab_area">
          <div class="btn_area clearfix">
              <button class="btn btn_tab act btn_none bottom_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <p style="float:left">PRODUCT</p>><p style="float: right; font-weight: 300">붙박이장</p></button>
          </div>
          
          <div class="content_area act" data-depth="1" data-idx="0" style="padding-top: -100px; min-height: 700px"><br><br><br><br><br><br><br><br><br><br>
              <div class="pro_main">
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/1_daboss_white.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 슬라이드</div>
                      <div class="pro_slide2">다보스화이트</div>
                  </div>
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/thum_slide/2_dreamsity.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 슬라이드</div>
                      <div class="pro_slide2">드림시티</div>
                  </div>
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/thum_slide/3_dimgray.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 슬라이드</div>
                      <div class="pro_slide2">딤그레이</div>
                  </div>
              </div>
          </div>
          
      </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="1">
    <div class="tab_area">
      <div class="btn_area clearfix">
        <button class="btn btn_tab act btn_none bottom_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <b style="float:left">PRODUCT</b>><p style="float: right; font-weight: 300">붙박이장</p></button>
      </div>

      <div class="content_area act" data-depth="1" data-idx="0" style="padding-top: -100px; min-height: 700px"><br><br><br><br><br><br><br><br><br><br>
              <div class="pro_main">
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/thum_swing/1_uvpearls.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 여닫이</div>
                      <div class="pro_slide2">UV유색펄</div>
                  </div>
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/thum_swing/2_garda200.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 여닫이</div>
                      <div class="pro_slide2">가르다200</div>
                  </div>
                  <div>
                      <img src="http://behom.cafe24.com//bizdemo39562/img/thum_swing/3_galleryorc.jpg" alt="">
                      <div class="pro_slide1">붙박이장 > 여닫이</div>
                      <div class="pro_slide2">갤러리오크</div>
                  </div>
        
              </div>
          </div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="2">
    <div class="tab_area">
        <div class="btn_area clearfix">
          <button class="btn btn_tab btn_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <b style="float:left">PRODUCT</b>><p style="float: right; font-weight: 300">붙박이장</p></button>
          <button class="btn btn_tab act btn_none" data-depth="1" data-idx="1" style="margin-left:171px; height: 100px; margin-top:50px;">드레스룸</button>
          <button class="btn btn_tab btn_none" data-depth="1" data-idx="2" style="height: 100px; margin-top:50px;">엔드리스</button>
        </div>

        <div class="content_area" data-depth="1" data-idx="0"><br><br><br><br><br><br><br><br><br><br>
            2Depth First tab content
        </div>
        <div class="content_area act" data-depth="1" data-idx="1"><br><br><br><br><br><br><br><br><br><br>
            2Depth Second tab content
        </div>
        <div class="content_area" data-depth="1" data-idx="2"><br><br><br><br><br><br><br><br><br><br>
            2Depth thrid tab content
        </div>
      </div>
    </div>
    
  <div class="content_area" data-depth="0" data-idx="3">
    <div class="tab_area">
        <div class="btn_area clearfix">
           <button class="btn btn_tab btn_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <b style="float:left">PRODUCT</b>><p style="float: right; font-weight: 300">붙박이장</p></button>
            <button class="btn btn_tab btn_none" data-depth="1" data-idx="1" style="margin-left:171px; height: 100px; margin-top:50px;">드레스룸</button>
            <button class="btn btn_tab act btn_none" data-depth="1" data-idx="2" style="height: 100px; margin-top:50px;">엔드리스</button>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="0"><br><br><br><br><br><br><br><br><br><br>
            2Depth First tab content
        </div>
        <div class="content_area" data-depth="1" data-idx="1"><br><br><br><br><br><br><br><br><br><br>
            2Depth Second tab content
        </div>
        <div class="content_area act" data-depth="1" data-idx="2"><br><br><br><br><br><br><br><br><br><br>
            2Depth thrid tab content
        </div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="4">
    <div class="tab_area">
        <div class="btn_area clearfix">
           <button class="btn btn_tab btn_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <b style="float:left">PRODUCT</b>><p style="float: right; font-weight: 300">붙박이장</p></button>
            <button class="btn btn_tab act btn_none" data-depth="1" data-idx="1" style="margin-left:171px; height: 100px; margin-top:50px;">신발장</button>
            <button class="btn btn_tab btn_none" data-depth="1" data-idx="2" style="height: 100px; margin-top:50px;">거실장</button>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="0"><br><br><br><br><br><br><br><br><br><br>
            2Depth First tab content
        </div>
        <div class="content_area act" data-depth="1" data-idx="1"><br><br><br><br><br><br><br><br><br><br>
            2Depth Second tab content
        </div>
        <div class="content_area" data-depth="1" data-idx="2"><br><br><br><br><br><br><br><br><br><br>
            2Depth thrid tab content
        </div>
    </div>
  </div>
  
  <div class="content_area" data-depth="0" data-idx="5">
    <div class="tab_area">
        <div class="btn_area clearfix">
           <button class="btn btn_tab btn_none" data-depth="1" data-idx="0" style="font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; margin-left: 80px; height: 100px; margin-top:50px;">
              <b style="float:left">PRODUCT</b>><p style="float: right; font-weight: 300">붙박이장</p></button>
            <button class="btn btn_tab btn_none" data-depth="1" data-idx="0" style="margin-left:171px; height: 100px; margin-top:50px;">신발장</button>
            <button class="btn btn_tab act btn_none" data-depth="1" data-idx="1" style="height: 100px; margin-top:50px;">거실장</button>
        </div>
        
        <div class="content_area" data-depth="1" data-idx="0"><br><br><br><br><br><br><br><br><br><br>
            2Depth First tab content
        </div>
        <div class="content_area" data-depth="1" data-idx="1"><br><br><br><br><br><br><br><br><br><br>
            2Depth Second tab content
        </div>
        <div class="content_area act" data-depth="1" data-idx="2"><br><br><br><br><br><br><br><br><br><br>
            2Depth third tab content
        </div>
    </div>
  </div>
  
</div>

<script>
    function findParent(el, className){
  let check = el.parentNode.classList.contains(className);
  
  if(check === true){
     return el.parentNode;
  }else{
    return findParent(el.parentNode, className);
  }
}

function bindingTabEvent(wrap){
  let wrapEl = document.querySelectorAll(wrap);
  
  wrapEl.forEach(function(tabArea){
    let btn = tabArea.querySelectorAll('.btn_tab');
    
    btn.forEach(function(item){
      item.addEventListener('click', function(){
        let parent = findParent(this, 'tab_area');
        let idx = this.dataset['idx'];
        let depth = this.dataset['depth'];
        let btnArr = parent.querySelectorAll('.btn_tab[data-depth="'+ depth +'"]');
        let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
        
        btnArr.forEach(function(btn){ btn.classList.remove('act'); });
        this.classList.add('act');
        contentArr.forEach(function(content){ content.classList.remove('act'); });
        parent.querySelector('.content_area[data-idx="'+ idx +'"][data-depth="'+ depth +'"]').classList.add('act');
      });
    });
  });
}

bindingTabEvent('.tab_wrap');
</script>


<script type="text/javascript">
    $(document).ready(function() {
    var $tgWrap = $('.accordion'),
        $tgAnchor = $tgWrap.find('a'),
        $tgCon =  $tgWrap.find('.acdCon'),
        curntClass = 'current',
        tgConW = $tgCon.width(),
        tgConSet = $tgCon.css('width', '0');
    var cuntFun = function(tg) {
        $tgAnchor.removeClass(curntClass).filter(tg).addClass(curntClass);
        $tgCon.removeClass(curntClass).filter(tg.next($tgCon)).addClass(curntClass);
    };
    $tgAnchor.eq(0).addClass(curntClass);
    $tgCon.eq(0).show().css('width', tgConW);
    $tgAnchor.click(function() {
        var $nextTgCon = $(this).next($tgCon);
        cuntFun($(this));
        console.log(tgConW);
        $nextTgCon.show().animate({
            width: tgConW
        }, 300);
        $tgCon.not($nextTgCon).animate({
            width: 0
        }, 300, function() {
            $(this).hide();
        });
    });
});
</script>


우선은 코드입니다.


위에 6개의 탭과 밑에 4개의 아코디언 메뉴가 있습니다


슬라이드의 탭을 누르면 슬라이딩의 아코디언 메뉴가 열리고


여닫이를 누르면 여닫이의 아코디언 메뉴가 열리는 그런 스크립트를 짜고싶은데


혹시 비슷한 예제를 알거나 아시는분 계실까요? 도움좀 주시면 감사하겠습니다.




0
0

  • 답변 3

  • 팬더다이녀석들아
    296
    2021-02-23 16:49:20

    jaksal829 


    답변 감사합니다 ^-^ 아쉽게도 제가 찾는건 아니었네요 ㅎㅎㅎ

    0
  • 페코옹
    1k
    2021-02-23 17:05:21

    탭이랑 아코디언에 id 주고 클릭 할때 특정 탭이나 아코디언 열고 닫게 하세요.


    그리고 탭 스크립트는 바닐라로 짜시고 아코디언 스크립트는 제이쿼리로 짜신거 같은데;

    헤깔리니 혼종으로 짜시지 말고 다시 리팩토링 잘 해보세요;

    0
  • 팬더다이녀석들아
    296
    2021-02-23 17:06:30

    페코옹


    답변 감사합니다!! 제가 초보라서 구글에서 이것저것 검색해서 적용한거다보니 혼종이 되었나보네요 말씀해주신대로 해보겠습니다~!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.