Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2021, 17:54
Интересующийся
Отправить личное сообщение для lev90 Посмотреть профиль Найти все сообщения от lev90
 
Регистрация: 31.01.2021
Сообщений: 10

Показать скрыть несколько блоков по одинаковым классам
Добрый день!

На сайте имеется около ста одинаковых блоков DIV в виде таблицы.
Необходимо, если есть блоки с одинаковыми классами, например:
<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_honor">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

сгруппировать блоки по одинаковым классам и скрыть все, кроме первых. В оставшемся блоке показывать кнопку показать, скрыть n элементов.
<div class="tovar_sony">
 <div>
  <div>
   <div>
    <div><span class="collapsible">Показать 2 элемента</span></div> <!-- Добавляется кнопка -->
   </div>
   <div></div>
  </div>
 </div>
</div>

<div class="tovar_honor">
 <div>
  <div>
   <div>
    <div><span class="collapsible"></span></div>
   </div>
   <div></div>
  </div>
 </div>
</div>

Возможно ли доработать этот код. Он показывает и скрывает блоки с классом content.
document.addEventListener("DOMContentLoaded", function() {
    const on = (parent, event, selector, handler) =>
    parent.addEventListener(event, ({target}) => {
        if (target = target.closest(selector)) handler(target)
    })
    const fn = el => {
        let parent = el.closest('.conteiner');
        let content = parent.querySelector('.content');
        content.style.setProperty('--maxH', `${content.scrollHeight}px`);
        parent.classList.toggle('active');
    }
    on(document, "click", ".collapsible", fn);
});

Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 15.02.2021, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,156

Сообщение от lev90
есть блоки с одинаковыми классами,
задача из разряда: пойди туда, незнамо куда.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показать скрыть элемент lev90 Элементы интерфейса 1 31.01.2021 21:17
Скрыть несколько блоков по клику aandrey Элементы интерфейса 9 05.06.2017 21:50
Как получить несколько элементов с одинаковым id? Poveritov Элементы интерфейса 1 18.04.2016 10:58
Скрыть / показать tr Dizzy Общие вопросы Javascript 1 16.07.2014 12:30
Показать (скрыть) фотографии. d00ker Элементы интерфейса 9 25.02.2013 16:58