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>

나는 위의 내용을 복사하고 바로 ID의 변경에 의해 독립적으로 작동 여러 확장기를 만들 수 있습니다. 그 중 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)'); 
    } 
}); 

주요 아이디어

는 data-attributes를 통해 링크 전환 용기의 id을 설정합니다. 이것에 따르면 어떤 div를 열거 나 숨길 지 알려줄 것입니다.

---

UPD : jQuery를하지 않고 같은 : JsFiddle