Recent searches


No recent searches

How to make a tab minimize



Posted Aug 21, 2024

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>


0

1

1 comment

image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post