Javascript — показать DIV при нажатии на кнопку (и скрыть его)

Javascript — показать DIV при нажатии на кнопку (и скрыть его)

Простенький код для показа / скрытия блока DIV (и вообще, любого блока) при нажатии кнопки.

Также происходит проверка подписи кнопки — если подпись «Показать блок», то при клике значение сменится на «Скрыть блок» — и наоборот.

  1. HTML-code
<button id="show_bar" >Показать блок</button>
<div id="bar_block"></div>

2. Стили (style CSS)

<style>
#bar_block {display: none;}
#show_bar { margin: auto;
display: flex;}
</style>

3. И сам скрипт:

<script>
$(document).ready(function() {
$("#show_bar").click(function() {
$("#bar_block").slideToggle();
if ($("#show_bar").html() == 'Показать штрихкод') {
$("#show_bar").html('Скрыть штрихкод');
} else {
$("#show_bar").html('Показать штрихкод');
}
});
});
</script>

Вот и все. Неколько строк кода и куча удовольствия ))

P.S. Если у вас не подключен JQuery — подключите:

<script src=»//code.jquery.com/jquery-3.5.1.slim.min.js» integrity=»sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj» crossorigin=»anonymous» async ></script>

Please follow and like us:

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Открыть чат
1
Попробуйте написать нам в WhatsApp!
Попробуйте написать нам в WhatsApp!