Как показать скрытые элементы при помощи js в bootsrap 4?

Question

[Berkutman]

<div class="container" id="some_block">
    <div class="row">
<p> TEXT-SHOW </p>

    </div>
    <div class="row d-none">
<p> TEXT-HIDDEN</p>

    </div>  
</div>
<button id="show_more">Показать еще</button>

$("#show_more").on("click", function() {
        $("#some_block").removeClass(".d-none");
    });

В чем моя проблема? Нажимаю на кнопку и не выводит скрытый блок

Answer 1

[Игорь]

Воспользуйтесь стандартным компонентом Collapse, он очень подробно описан на странице официальной документации. Ваша проблема в том что вы изобретаете велосипед, когда уже изобрели мотоцикл, раньше я тоже очень часто этим занимался, не советую.

Comments

[Berkutman]

Этим компонентом не получится сделать то что мне нужно, данный вариант я для примера показал. Там у меня сложнее задача. Нужно именно так.

[Berkutman]

Хотя может и правда можно, спасибо попробую.

[Игорь]

Berkutman, хорошо, понял вас, конкретно в вашем примере вы удаляете класс у родительского компонента.

$("#show_more").on("click", function() {
  $("#some_block").removeClass("d-none"); // Ошибка! Вы удаляете класс у #some_block, а надо у его дочернего компонента
});

[Игорь]

Berkutman, то есть вам нужно указать ID либо конкретному блоку который нужно показать, либо удалить класс d-none у всех вложенных блоков у которых он есть, например так

$("#show_more").on("click", function() {
  $("#some_block .row").removeClass("d-none"); 
});

Answer 2

[Илхомжон Матазимов]

$('#show_more').addEventListener('click', () => {
    $('#some_block').removeClass('d-none')
})

Comments

[Berkutman]

Uncaught TypeError: $(...).addEventListener is not a function

[Илхомжон Матазимов]

Berkutman, тогда вам для начала надо получить через селектор:

document.getElementById("show_more").addEventListener('click', () => {
    $('#some_block').removeClass('d-none')
})

[Илхомжон Матазимов]

Michael McGlynn, так по кайфу