How to make toggle with Vanilla Js

Question

I am making toggle Tab.

I want to make more compact.

I expect my js code will be shorter than now.

var btns = document.getElementsByClassName('btn_tab');
var tab_contents = document.getElementsByClassName('sub_tab_content');
btns[0].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[0].classList.add('selected');
  }
  btns[1].classList.remove('selected');
  btns[2].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
  tab_contents[2].classList.remove('selected');
});
btns[1].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[1].classList.add('selected');
  }
  btns[0].classList.remove('selected');
  tab_contents[0].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
  btns[2].classList.remove('selected');
});
btns[2].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[2].classList.add('selected');
  }
  btns[0].classList.remove('selected');
  btns[1].classList.remove('selected');
  tab_contents[0].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
});

.sub_title {
  height: 30px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.sub_title>img {
  height: 100%;
}

.sub_btn_wrap {
  font-size: 0;
}

.btn_tab {
  padding: 15px 34px;
  border: 1px solid #808080;
  border-bottom: 1px solid white;
  background-color: transparent;
  font-size: 16px;
  border-bottom: 1px solid black;
}

.btn_tab.selected {
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.btn_tab.selected~.btn_tab {
  border-bottom: 1px solid black;
  color: #808080;
  border-left: 0px solid transparent;
}

.sub_tab_content_wrap {
  border-top: 1px solid black;
  width: 100%;
  height: 50px;
}

.sub_tab_content {
  display: none;
  padding-top: 22px;
  font-size: 0;
}

.sub_tab_content.selected {
  display: block;
}

.box-item {
  display: inline-block;
  width: 220px;
  box-sizing: border-box;
  border-left: 1px solid black;
}

.box-item:nth-child(1) {
  border-left: 1px solid transparent;
}

.box-item-img-wrap {
  text-align: center;
}

.box-item-btn-wrap {
  text-align: center;
}

.btn-detail,
.btn-calculate {
  width: 80px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
}

.btn-detail {
  border: 1px solid #c9c9c9;
  background-color: white;
  color: #c9c9c9;
  margin-right: 5px;
}

.btn-calculate {
  border: 1px solid #333333;
  background-color: #002c5f;
  color: white;
}

<div style="margin-top: 70px; border-top: 1px solid gray; min-height: 400px;">
  <div class="sub_title">
    <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/h4_recomend_car.png" />
  </div>
  <div class="sub_btn_wrap" style="position: relative; z-index: 3;">
    <button class="btn_tab selected" id="btn_tab01">조회순</button>
    <button class="btn_tab" id="btn_tab02">판매순</button>
    <button class="btn_tab" id="btn_tab03">출시순</button>
    <button style="float:right;border: none; background: none;"><img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/btn_compare_car.png"/></button>
  </div>
  <div class="sub_tab_content_wrap" style="transform: translateY(-1px); position: relative; z-index: 2;">
    <div id="sub_tab_content01" class="sub_tab_content selected">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content02" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content03" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You need to select the buttonWrapper and with event.target != event.currentTarget you can check if you clicked a child element (a button) or the wrapper. After that you just need your logik.

Code

var subButtonWrapper = document.querySelector('.sub_btn_wrap')

subButtonWrapper.addEventListener('click', toggleContent)

function toggleContent(event) {
  if (event.target != event.currentTarget) {
    var id = event.target.id.replace('btn_tab', '')
    toggleClass('.sub_btn_wrap .selected', '#' + event.target.id, 'selected')
    toggleClass('.sub_tab_content_wrap .selected', '#sub_tab_content' + id, 'selected')
  }
}

function toggleClass(parentElementQuery, childElementQuery, className) {
  document.querySelector(parentElementQuery).classList.toggle(className)
  document.querySelector(childElementQuery).classList.toggle(className)
}

Example

var subButtonWrapper = document.querySelector('.sub_btn_wrap')

subButtonWrapper.addEventListener('click', toggleContent)

function toggleContent(event) {
  if (event.target != event.currentTarget) {
    var id = event.target.id.replace('btn_tab', '')
    toggleClass('.sub_btn_wrap .selected', '#' + event.target.id, 'selected')
    toggleClass('.sub_tab_content_wrap .selected', '#sub_tab_content' + id, 'selected')
  }
}

function toggleClass(parentElementQuery, childElementQuery, className) {
  document.querySelector(parentElementQuery).classList.toggle(className)
  document.querySelector(childElementQuery).classList.toggle(className)
}

.sub_title {
  height: 30px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.sub_title>img {
  height: 100%;
}

.sub_btn_wrap {
  font-size: 0;
}

.btn_tab {
  padding: 15px 34px;
  border: 1px solid #808080;
  border-bottom: 1px solid white;
  background-color: transparent;
  font-size: 16px;
  border-bottom: 1px solid black;
}

.btn_tab.selected {
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.btn_tab.selected~.btn_tab {
  border-bottom: 1px solid black;
  color: #808080;
  border-left: 0px solid transparent;
}

.sub_tab_content_wrap {
  border-top: 1px solid black;
  width: 100%;
  height: 50px;
}

.sub_tab_content {
  display: none;
  padding-top: 22px;
  font-size: 0;
}

.sub_tab_content.selected {
  display: block;
}

.box-item {
  display: inline-block;
  width: 220px;
  box-sizing: border-box;
  border-left: 1px solid black;
}

.box-item:nth-child(1) {
  border-left: 1px solid transparent;
}

.box-item-img-wrap {
  text-align: center;
}

.box-item-btn-wrap {
  text-align: center;
}

.btn-detail,
.btn-calculate {
  width: 80px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
}

.btn-detail {
  border: 1px solid #c9c9c9;
  background-color: white;
  color: #c9c9c9;
  margin-right: 5px;
}

.btn-calculate {
  border: 1px solid #333333;
  background-color: #002c5f;
  color: white;
}

<div style="margin-top: 70px; border-top: 1px solid gray; min-height: 400px;">
  <div class="sub_title">
    <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/h4_recomend_car.png" />
  </div>
  <div class="sub_btn_wrap" style="position: relative; z-index: 3;">
    <button class="btn_tab selected" id="btn_tab01">조회순</button>
    <button class="btn_tab" id="btn_tab02">판매순</button>
    <button class="btn_tab" id="btn_tab03">출시순</button>
    <button style="float:right;border: none; background: none;"><img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/btn_compare_car.png"/></button>
  </div>
  <div class="sub_tab_content_wrap" style="transform: translateY(-1px); position: relative; z-index: 2;">
    <div id="sub_tab_content01" class="sub_tab_content selected">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content02" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content03" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Follow this approach

• Iterate btns and sub-tab-content elements.

• Bind the click event in such a way that it clears the existing selection first and then proceed with selection.

Demo

var btns = document.getElementsByClassName('btn_tab');
var tab_contents = document.getElementsByClassName('sub_tab_content');

[].slice.call( btns ).forEach( function( btn, index ){
   btn.addEventListener('click', function() {
      //clear all selections first
      [].slice.call( tab_contents ).forEach( function( tabContent, index ){
          btns[ index ].classList.remove( "selected" );
          tabContent.classList.remove( "selected" );
      });
      this.classList.add('selected');
      tab_contents[ index ].classList.add('selected');
   });
});

.sub_title {
  height: 30px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.sub_title>img {
  height: 100%;
}

.sub_btn_wrap {
  font-size: 0;
}

.btn_tab {
  padding: 15px 34px;
  border: 1px solid #808080;
  border-bottom: 1px solid white;
  background-color: transparent;
  font-size: 16px;
  border-bottom: 1px solid black;
}

.btn_tab.selected {
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.btn_tab.selected~.btn_tab {
  border-bottom: 1px solid black;
  color: #808080;
  border-left: 0px solid transparent;
}

.sub_tab_content_wrap {
  border-top: 1px solid black;
  width: 100%;
  height: 50px;
}

.sub_tab_content {
  display: none;
  padding-top: 22px;
  font-size: 0;
}

.sub_tab_content.selected {
  display: block;
}

.box-item {
  display: inline-block;
  width: 220px;
  box-sizing: border-box;
  border-left: 1px solid black;
}

.box-item:nth-child(1) {
  border-left: 1px solid transparent;
}

.box-item-img-wrap {
  text-align: center;
}

.box-item-btn-wrap {
  text-align: center;
}

.btn-detail,
.btn-calculate {
  width: 80px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
}

.btn-detail {
  border: 1px solid #c9c9c9;
  background-color: white;
  color: #c9c9c9;
  margin-right: 5px;
}

.btn-calculate {
  border: 1px solid #333333;
  background-color: #002c5f;
  color: white;
}

<div style="margin-top: 70px; border-top: 1px solid gray; min-height: 400px;">
  <div class="sub_title">
    <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/h4_recomend_car.png" />
  </div>
  <div class="sub_btn_wrap" style="position: relative; z-index: 3;">
    <button class="btn_tab selected" id="btn_tab01">조회순</button>
    <button class="btn_tab" id="btn_tab02">판매순</button>
    <button class="btn_tab" id="btn_tab03">출시순</button>
    <button style="float:right;border: none; background: none;"><img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/btn_compare_car.png"/></button>
  </div>
  <div class="sub_tab_content_wrap" style="transform: translateY(-1px); position: relative; z-index: 2;">
    <div id="sub_tab_content01" class="sub_tab_content selected">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content02" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content03" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
  </div>
</div>