Вывод текста при нажатии на div

Question

Мне необходимо, чтобы при нажатии на div с классом tab-link, ниже выводился ещё один div с классом tab-link-list. Заранее спасибо!

<div class="tab-link">
    Общие Правила
    <div class="tab-link-list">
        <li class="tab-link-list-li">Правила Администрации</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
    </div>
</div>

Answer 1

const tabLink = document.querySelector('.tab-link');

tabLink.addEventListener('click', (ev) => {
  ev.target.querySelector('.tab-link-list').classList.toggle('active');
});

.tab-link-list {
  display: none;
}

.tab-link-list.active {
  display: block;
}

<div class="tab-link">
  Общие Правила
  <ul class="tab-link-list">
    <li class="tab-link-list-li">Правила Администрации</li>
    <li class="tab-link-list-li">Правила «AWP #2»</li>
    <li class="tab-link-list-li">Правила «AWP #2»</li>
    <li class="tab-link-list-li">Правила «AWP #2»</li>
    <li class="tab-link-list-li">Правила «AWP #2»</li>
  </ul>
</div>

Answer 2

Надо использовать jqwery, так проще.

function show_list(){
    if ($('#list').is(':visible')){
        $('#list').hide();
    }
    else{
        $('#list').show();
    }
}

.tab-link-list{
    display:none;
}

<div class="tab-link" onclick="show_list()">
    Общие Правила
    <div id="list" class="tab-link-list">
        <li class="tab-link-list-li">Правила Администрации</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
        <li class="tab-link-list-li">Правила «AWP #2»</li>
    </div>
</div>

БЛОГ НА HUSL

Вывод текста при нажатии на div

Ответы (2 шт):