Создайте несколько расширяющихся блоков на одной странице, используя HTML

Question

Итак, мне нужно было создать страницу с несколькими разделами, которые можно было бы разворачивать и сворачивать независимо друг от друга. Я провел свое исследование некоторое время назад и смог "развить" эту функциональность:

<h2><a style="text-decoration:none;" onclick="if(document.getElementById('ID') .style.display=='none'){ 
document.getElementById('ID') .style.display='';    
document.getElementById('IDtitle') .innerHTML='- (Collapse)';}     
else{
document.getElementById('ID') .style.display='none';document.getElementById('IDtitle') .innerHTML='+ (Expand)';}"><span id="IDtitle" style=" cursor: pointer; color: #7CA6C0;">+ (Expand)</span></a></h2>
<p>Visible content</p>
<div id="ID" style="display: none ;">
  My hidden content here
</div>

Исходя из этого, я могу создать несколько модулей расширения, которые работают независимо, скопировав вышеизложенное и просто изменив ID. Это было все хорошо, когда у меня было от 1 до 5 из них. Сейчас я работаю над проектом, в который добавляются небольшие биографии, и я смотрю 45 из них на одной странице. Должен быть другой путь, верно? Есть ли лучший способ сделать то, что я делаю?

Answer 1

Сейчас я приведу одно решение, но с использованием jquery. Здесь вам просто нужно добавить расширяемые элементы в HTML, логика будет единой для них всех.

Живая демо

$('a').on('click', function(e){
  e.preventDefault();
  var clickedLink = $(this);
  var relatedContainerId = clickedLink.data('container');
  var relatedContainer = $('#' + relatedContainerId);
  if(relatedContainer.is(':visible')){
    relatedContainer.hide();
    clickedLink.find('span').text('+ (Expand)');
  }else{
    relatedContainer.show();
    clickedLink.find('span').text('- (Collapse)');
  }
});

Основная идея для установки id переключенного контейнера в ссылке через атрибуты данных. В соответствии с этим Вы будете знать, какой div вы должны открывать или скрывать.

---

UPD: тоже самое без Jquery: JsFiddle