At the moment there is such code:
var tabsLink = document.querySelectorAll('.nav-tabs a'), tabsElement = document.querySelectorAll('.tab-pane'), i; tabsElement[0].classList.add('tab-open'); var showTabs = function(e) { e.preventDefault(); var targetElement = document.querySelectorAll(this.getAttribute('href')); for (i = 0; i < targetElement.length; i++) { if (targetElement[i].classList.contains('tab-open')) { targetElement[i].classList.remove('tab-open'); return false; } targetElement[i].classList.add('tab-open'); } }; for (i = 0; i < tabsLink.length; i++) { tabsLink[i].addEventListener('click', showTabs); } /*Tabs in Javascript*/ * { padding: 0; margin: 0; } .container { max-width: 960px; margin: 0 auto; } .tabs-wrapper { margin-top: 30px; } .nav-tabs { margin-bottom: 15px; } .nav-tabs li { list-style: none; display: inline-block; } .nav-tabs a { font-size: 15px; display: inline-block; text-decoration: none; color: #428bca; padding: 12px 25px; border-radius: 4px; border: 1px solid #ddd; } .nav-tabs a:hover { background: #eee; transition: 0.3s; } .nav-tabs .tab-active { color: #000; } .tab-pane { padding: 20px; background: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px; display: none; } .tab-open { display: block; } .title-tabs { font-size: 20px; font-weight: bold; margin-right: 10px; } <body> <div class="container"> <div class="tabs-wrapper"> <ul class="nav-tabs"> <li><a href="#tabs1" class="tab-active" data-toggle="tab">Tabs 1</a> </li> <li><a href="#tabs2" data-toggle="tab">Tabs 2</a> </li> <li><a href="#tabs3" data-toggle="tab">Tabs 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="tabs1"><span class="title-tabs">Tabs1</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis recusandae dignissimos fugit reprehenderit nam eum qui magni. Assumenda amet nostrum earum sequi a hic, quis autem blanditiis dolorum, laborum eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat corporis, dolorum! Error nostrum molestias quae accusantium ipsam impedit aliquid dolore cupiditate eos quo, obcaecati sunt, rem est dolorum, explicabo, doloribus.</div> <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente, delectus tenetur quos molestias nulla ducimus dolores iste, aspernatur, a rerum ullam at veritatis laboriosam molestiae eius illo dolor maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam soluta alias illum consequatur tenetur a repellat, fugit deleniti perspiciatis amet, ab dolorum. Veritatis cupiditate voluptatibus temporibus. Aspernatur quisquam est ut!</div> <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et exercitationem quam tempora voluptatum minima minus quibusdam blanditiis, mollitia quia numquam ea sint, molestiae molestias, temporibus assumenda ipsam ullam cupiditate. Architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perferendis, voluptatibus, quidem quam veritatis mollitia illum veniam obcaecati, voluptate ad illo consequuntur neque alias magnam magni vel, facilis ipsum culpa!</div> </div> </div> </div> </body> Here, as usual, the first tab is open, now I need to do the following so that when I clicked on Tabs 2, the first text block was hidden and the second tab appeared, the point is that when you click on different buttons, only those blocks that are assigned to the button in href shown, so that Now I pressed each button and everyone appeared in a row. I can not understand how to proceed.
