How to make a tab minimize | Community
Skip to main content

How to make a tab minimize

  • August 21, 2024
  • 1 reply
  • 0 views
М

Hi 1263169183150 

Maybe you have information on how to implement the functionality of minimizing a tab by clicking on it again, because now I am faced with the situation that if a tab is open on the page, it is impossible to minimize it.

 

I use this HTML code
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'вкладка 1')">вкладка 1</button>
  <button class="tablinks" onclick="openCity(event, 'вкладка 2')">вкладка 2</button>
  <button class="tablinks" onclick="openCity(event, 'Вкладка 3')">Вкладка 3</button>
</div>
<!-- Tab content -->
<div id="вкладка 1" class="tabcontent">
  <h3 id="h_01HJJPZS932E2E5BBM3WSY2S5H">вкладка 1</h3>
  <p>Тест вкладки 1.</p>
</div>
<div id="вкладка 2" class="tabcontent">
  <h3 id="h_01HJJPZS93GVXJ5Z6GP4CQ368J">вкладка 2</h3>
  <p>Тест вкладки 2.</p>
</div>
<div id="Вкладка 3" class="tabcontent">
  <h3 id="h_01HJJPZS93AXP0DNGV0VAN3CAS">вкладка 3</h3>
  <p>Тест вкладки 3 .</p>
</div>

    1 reply

    Pulkit12
    • Pulkit12
    • August 22, 2024

    Hi Максим Насон

    You need to include the JavaScript code within the <script> tag on the page to add the tab HTML code. Also, add the following CSS at the end of your style.css file.

     

    1)Remember to include the following JavaScript code on the page where you placed the tab HTML code, as shown in the attached screenshot.

     <script>
 function openCity(evt, cityName) {
   // Declare all variables
   var i, tabcontent, tablinks;
   // Get all elements with class="tabcontent" and hide them
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
     tabcontent[i].style.display = "none";
   }
   // Get all elements with class="tablinks" and remove the class "active"
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   // Show the current tab, and add an "active" class to the button that opened the tab
   document.getElementById(cityName).style.display = "block";
   evt.currentTarget.className += " active";
 }
 </script>

     

    2) Don't forget to include the following CSS snippet at the end of your style.css file!

     .tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
}

     

    Let me know  if it solves your issue 

     

    Thank You

    Pulkit

    Team Diziana

     

    Terms & ConditionsCookie settingsAccessibility statement