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

Question

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

<h2><a style="text-decoration:none;" onclick="if(document.getElementById('ID') .style.display=='none'){ 
 
document.getElementById('ID') .style.display=''; \t \t 
 
document.getElementById('IDtitle') .innerHTML='- (Collapse)';} \t \t 
 
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>

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

Answer 1

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

Live demo

$('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 из переключаемых контейнера в связи с помощью data-attributes. В соответствии с этим вы узнаете, какой div вы должны открывать или скрывать.

---

UPD: То же без Jquery: JsFiddle