Как разворачивать и сворачивать (2 и более статей не получается)?

Question

[Даниил Сазонов]

Почему 1 статья не разворачивается ,а разворачивается 2 статья ,но при этом (2 статья) разворачиваться/сворачивается .
(1 статья)

тест текст текст<div id="info" class="text__podzigilovol">теуст теуст теуст 
<?--</div> 
<p><a href="javascript:sh()" class="text__glavn js-btn-readmore" >далее</a></p> 
<script type="text/javascript"> 
sh(); 
function sh() { 
obj = document.getElementById("info"); 
if( obj.style.display == "none" ) {
  obj.style.display = "block";
} else {
  obj.style.display = "none";
} 
} 
</script>

Вторая статья.

текст текст текст 
<div id="1_info" class="text__podzigilovol"> 
текст текст текст </div> 
<p><a href="javascript:sh()" class="text__podzigilovol">далее</a></p> 
<script type="text/javascript"> 
sh(); 
function sh() { 
obj = document.getElementById("1_info"); 
if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; } 
} 
</script>

Comments

[Антон]

Могу предложить следующее - взять два листа бумаги со своей статьей на каждой и сложить их пополам.
Ну, или, предоставьте код

[Даниил Сазонов]

Антон, все исправил(первый раз на этом сайте)

[Stalker_RED]

Даниил Сазонов, используйте вот эту кнопочку, ничего непонятно же.


А еще лучше - соберите пример в jsfiddle.

[Даниил Сазонов]

Stalker_RED, я вроде сделал понятно ? или все так же?

Answer 1

[Сергей Соколов]

Не работает потому, что функцию sh() переопределяете для каждой статьи заново – остаётся последний вариант.

Лучше сделать так:

1. Скрываемым частям статей давать класс с display:none У вас это text__podzigilovol.
   
2. В ссылке-кнопке для спрятать/показать записывать id управляемой статьи в data-атрибуте: data-id="info-2" – так кнопка будет «знать», кем она управляет.
   
3. Кнопкам не писать в href никакого javascript:..., вместо этого лучше на них повесить слушателя события клика. Удобно дать всем кнопкам определённый класс, по нему их отыскать и в цикле повесить слушателя события.
   
4. Обработчик клика описывается лишь один раз. Он получает в качестве this кликнутую ссылку. Из неё берёт data-атрибут с id нужного блока. И включает/выключает ему класс, который прячет этот блок.
   

Рабочий пример

Код

function sh(event) {
  const className = "text__podzigilovol";
  event.preventDefault();

  obj = document.getElementById(this.dataset.id);
  if(!obj) return;
  if( obj.classList.contains(className)) {
    obj.classList.remove(className);
  } else {
    obj.classList.add(className);
  } 
} 


Array.prototype.forEach.call(
  document.querySelectorAll('.js-btn-readmore'),
  function(e){
    e.addEventListener('click', sh);
  }
);

Comments

[Даниил Сазонов]

простите за такой глупый вопрос ,а что именно нужно изменить ,чтобы все получилось

[Сергей Соколов]

Даниил Сазонов, уже обновил ответ с готовым решением. Спрашивайте, что не понятно.

[Даниил Сазонов]

Сергей Соколов, у меня почему-то не получается (ваш код )встроить в свой ,все скрывается ,но не раскрывается .Вам прислать весь код скринами?
p.s я новичок в js

[Сергей Соколов]

Даниил Сазонов, «код скринами» – ни в коем случае. Изначально должно быть всё скрыто и по кнопке появляться. Смотрите, что пишется в консоль браузера – возможно, там ошибки.

[Даниил Сазонов]

Сергей Соколов, в консоле Uncaught SyntaxError: Unexpected identifier вот такая ошибка

[Даниил Сазонов]

Сергей Соколов, простите я решил проблему (если что я вам еще напишу),спасибо вам за помощь

[Сергей Соколов]

Даниил Сазонов, тут есть кнопка «Отметить решением» – если мой ответ вам помог решить проблему.

[Даниил Сазонов]

Сергей Соколов, ок ,так и сделаю ,спасибо еще раз,вы меня спасли)