Добавление плавности для открытия tab-а Javascript

116

11 августа 2019, 05:30

Нужно добавить плавность для открытия tab-а. Есть блок, при клике на li класса "advantages-col" появляется нижний div блок класса "panel". Но появляется резко, мне нужно добавить плавность. Через jQuery пробовала с помощью fadeIn и fadeToggle, к сожалению работает некорректно, то есть плавность работает но открывает одновременно все либо несколько вкладок. А также пробовала в класс active добавить transition и стили добавляла в блок с javascript-ом. К сожалению тоже безрезультативно. Прошу помочь. Благодарю заранее за ответ.

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>

Answer 1

Если вам надо сделать появление блоков только на двух li, то можно обойтись и без 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>