Tabs For Blogger - html , Css and Javascript

 

HTML

CSS

JS

HTML

<br /><br /><center><div class="container" style="box-sizing: border-box;margin: 0;box-shadow: 0 20px 40px #d6dce8;width: 90%;"> <div class="tabs" style="display: grid;grid-template-columns: repeat(2,1fr);"> <h3 class="active" style="font-family: 'Montserrat', sans-serif;font-weight: bold;">S1</h3> <h3 style="font-family: 'Montserrat', sans-serif;font-weight: bold;">S2</h3> </div> <div class="tab-content" style="background: #fff;padding: 50px 40px;"> <div class="active"> <h4 style="font-family: 'Montserrat', sans-serif;font-weight: bold;font-size: 25px;">SEASON 1</h4><br> <p style="font-family: 'Montserrat', sans-serif;font-weight: bold;">here</p> </div> <div> <h4 style="font-family: 'Montserrat', sans-serif;font-weight: bold;font-size: 25px;">SEASON 2</h4><br> <p style="font-family: 'Montserrat', sans-serif;font-weight: bold;">here</p> </div> </div> </div></center>

CSS

.tabs .active{ background: #fff; color: #132df3; } .tab-content div{ display: none; } .tab-content .active{ display: block; } .tabs h3{ background-color: #efeef5; text-align: center; padding: 15px 0; margin: 0; }

JAVASCRIPT

<script> let tabs = document.querySelectorAll(".tabs h3"); let tabContents = document.querySelectorAll(".tab-content div"); tabs.forEach((tab, index) => { tab.addEventListener("click", () => { tabContents.forEach((content) => { content.classList.remove("active"); }); tabs.forEach((tab) => { tab.classList.remove("active"); }); tabContents[index].classList.add("active"); tabs[index].classList.add("active"); }); }); </script>