You need to add smoothness to open the tab . There is a block, when you click on the li of the "classes advantages-col " class, the lower div block of the " panel " class appears. But it appears abruptly, I need to add smoothness. Through jQuery I tried using fadeIn and fadeToggle , unfortunately it does not work correctly, that is, the smoothness works but opens all or several tabs at the same time. I also tried to add transition to the active class and add styles to the block with javascript. Unfortunately, too, to no avail. Please help. Thanks in advance for your reply.

 var tabPanels = document.querySelectorAll(".panel"); var tabButtons = document.querySelectorAll(".advantages-col"); function showPanel(panelIndex) { tabButtons.forEach(function(node) { node.classList.remove("active"); }); tabButtons[panelIndex].classList.add("active"); tabPanels.forEach(function(node) { node.style.display = "none"; }); tabPanels[panelIndex].style.display = "flex"; } 
 <ul> <li data-target="#protect" onclick="showPanel(6)" class="advantages-col active"> <div class="flex part_one_adv"> <div data-target="#protect">Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСния</div> </div> </li> <div class="panel active" id="protect"> <div class="flex panel_col"> <div class="pl-16"> <h4>Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСния</h4> <p>Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСния</p> </div> </div> <div class="mob_menu_btn"><button type="button" class="btn btn-red-light call-modal-show">ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ заявку</button></div> </div> <li data-target="#protect2" onclick="showPanel(7)" class="advantages-col"> <div class="flex part_one_adv"> <div data-target="#protect2">Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСния</div> </div> </li> <div class="panel" id="protect2"> <div class="flex panel_col"> <div class="pl-16"> <h4>Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСния</h4> <p>Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСнияЗащита ΠΎΡ‚ проникновСния</p> </div> </div> <div class="mob_menu_btn"><button type="button" class="btn">ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ заявку</button></div> </div> </ul>

    1 answer 1

    If you need to make blocks appear only on two li, then you can do without js.

      <label for="input">press me!!</label> <input type="checkbox" id="input"> <div class="test2"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum id non velit eos ea nesciunt dolores, recusandae, nulla vero consequatur inventore repellendus? Quas eveniet harum, voluptates minima iusto voluptas illum. </div> <style> label{ border: 1px solid black; padding: 2px; } input[type="checkbox"]{ display: none; } .test2{ opacity: 0; transition: 2s; } input:checked ~ .test2{ opacity: 1; display: block; } </style>