0

помогите разобраться со следующей проблемой. Задача: при клике на кнопку отображать/скрывать множество текстовых блоков на странице.

Сделал следующим образом:

     $(document).ready(function() {
      $('#show').click(function(){
		  $('#name').toggle();
		  });
    });
#name {
		display: none;
	}
<a href="#" id="show">Скрыть / отобразить</a>

<div id="name">А</div>
<div id="name">Б</div>
<div id="name">В</div>
<div id="name">Г</div>
<div id="name">Д</div>

Но это работает только на первый элемент. Как сделать так, чтобы отображались/скрывались все элементы с одинаковым ID?

1
  • Одинаковый ID нельзя.
    – Nilsan
    15 окт 2018 в 10:54

2 ответа 2

2

Я бы не использовал один ID для разных элементов, лучше объединить их классом. Так как ID подразумевает что элемент уникальный. Но если надо использовать именно такую конструкцию то вот так будет работать:

   $(document).ready(function() {
      $('#show').click(function(){
		  $('div#name').toggle();
		  });
    });
#name {
		display: none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="show">Скрыть / отобразить</a>

<div id="name">А</div>
<div id="name">Б</div>
<div id="name">В</div>
<div id="name">Г</div>
<div id="name">Д</div>

1
  • Работает! Спасибо большое!
    – Alex Bub
    15 окт 2018 в 11:34
0
<a href="#" id="show">Скрыть / отобразить</a>
<div id="all-blocks">
<div id="name">А</div>
<div id="name">Б</div>
<div id="name">В</div>
<div id="name">Г</div>
<div id="name">Д</div>
</div>

css :

#name {
        display: block;
}

js :

$(document).ready(function() {
      $('#show').click(function(){
            $('#all-blocks').css("display", "none");
          });
    });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.