[html] tab menu (모바일 시 slide down )

HTML

<!-- tab -->
<div class="tab-box">
	<a href="#n" class="btn-select"><span></span><i class="xi-angle-down-min"></i></a>
    <ul class="tab-menu">
    	<li class="on"><a href="#n">tab1</a></li>
        <li><a href="#n">tab2</a></li>
    </ul>
</div>

<!-- tab contents -->
<div class="tab-content" style="display: block;">
	tab1 contents
</div>
<div class="tab-content">
	tab2 contents
</div>

CSS

.btn-select{display: none;}

.tab-menu{display: flex;flex-wrap: nowrap;}
.tab-menu li{height: 50px;}
.tab-menu li a{display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;padding: 0 20px;border: 1px solid #333;background-color: #fff;font-size: 16px;color: #333;}
.tab-menu li + li a{border-left: 0;}

.tab-content{display: none;}

@media screen and (max-width: 768px){
	.btn-select{display: block;position: relative;padding: 15px 20px;background-color: #333;text-align: center;}
    .btn-select span{color: #fff;font-size: 16px;}
    .btn-select i{position: absolute;top: 50%;right: 10px;transform: translateY(-50%);font-size: 18px;color: #fff;transition: 0.3s ease;}
    .btn-select.on i{transform: translateY(-50%) rotate(180deg);}
    
    .tab-menu{overflow-y: auto;display: none;position: absolute;top: 55px;left: 50%;transform: translateX(-50%);z-index: 1;width: 100%;max-height: 250px;border: 1px solid #333;}
    .tab-menu li{width: 100%;height: auto;}
    .tab-menu li a{padding: 10px 0;border: 0;background-color: #fff;font-size: 14px;color: #333;}
   
}

jQuery

$(document).ready(function(){
	if($(window).innerWidth() < 768){
    	mTab();
    }else{
    	Tab();
    }
});


function Tab(){
    $('.tab-menu').removeAttr('style');
    $('.tab-menu').removeClass('mobile');
    $('.tab-menu > li').off().on('click',function(e){
        var cnt = $(this).index();
        $(this).addClass('on');
        $(this).siblings('li').removeClass('on');
        $('.tab-content').hide().eq(cnt).stop().fadeIn(200);
    });
}

function mTab(){
    $('.tab-menu').removeAttr('style');
    $('.tab-menu').addClass('mobile');
    var activeSelect = $('.tab-menu > li.on').text();
    $('.btn-select > span').text(activeSelect);

    $('.btn-select').off().on('click', function(e){
        $(this).toggleClass('on');
        $(this).next('ul').stop().slideToggle();
    });
    $('.tab-menu > li').off().on('click', function(e){
        var cnt = $(this).index(),
            activeSelect = $(this).children('a').text();
        $('.btn-select > span').text(activeSelect);
        $('.btn-select').removeClass('on');
        $(this).siblings().removeClass('on');
        $(this).addClass('on');
        $('.tab-content').hide().eq(cnt).stop().fadeIn(200);
        $(this).parent('ul').stop().slideUp();
    });
    $('body').on('click',function(e){
        if($('.js-conf-info-tab').hasClass('mobile')){
            if($('.conf-info-conbox .js-tab-wrap').has(e.target).length == 0){
                $('.js-btn-conf-select').removeClass('on');
                $('.js-conf-info-tab').stop().slideUp();
            }
        }
    });
}