Widget:Dtab

<style> .tab-container .tab{width:100%;display:flex;flex-wrap:wrap;position:relative;background-color:#505050;margin-bottom:8rem;user-select:none} .tab-container .tab-item{display:flex;flex-direction:column;color:#fff;cursor:pointer;width:fit-content;padding:0.8rem 1.2rem;margin:0.6rem;box-sizing:border-box;transition:all 0.2s} .tab-container .tab-item > span{width:fit-content;height:fit-content;white-space:nowrap} .tab-container .tab-item.active{color:#505050;background-color:#fff} .tab-container .tab-item .subtab{display:none;position:absolute;top:105%;left:0;width:100%;cursor:auto} .tab-container .tab-item.active .subtab{display:flex;background-color:#505050} .tab-container .tab-item .subtab .subtab-item{padding:0.6rem 1rem;margin:0.4rem;color:#fff;cursor:pointer} .tab-container .tab-item .subtab .subtab-item.active{color:#505050;background-color:#fff} .tab-container .content-item{display:none} .tab-container .content-item.active{display:inline-block} </style> <script> (window.RLQ=window.RLQ||[]).push(['jquery',()=>{$(function(){if($('.subtab').length>0){$('.subtab').children().removeClass('active').eq(0).addClass('active')}$('.content-item').eq(0).addClass('active');$('.tab-item').each((index,item)=>{$(item).click(function(e){if(e.target.className.split(' ').includes('subtab')){return}$(e.currentTarget).addClass('active').siblings().removeClass('active');if($('.subtab').length<=0){$('.content-item').removeClass('active').eq(index).addClass('active').siblings()}else{const key=$(item).prevAll().find('.subtab-item').length;$('.subtab-item').removeClass('active').eq(key).addClass('active');$('.content-item').removeClass('active').eq(key).addClass('active')}})});$('.subtab-item').each((index,item)=>{$(item).click((e)=>{e.stopPropagation();$(e.currentTarget).addClass('active').siblings().removeClass('active');$('.content-item').removeClass('active').eq(index).addClass('active')})})})},]); </script>