SCRIPT 펼침 메뉴 - 클릭하면 접힘, 클릭하면 펼쳐지는 스크립트
페이지 정보
조회 2,510회 작성일 22-05-08 21:46
본문
펼침 메뉴
클릭하면 접힘, 클릭하면 펼쳐지는 스크립트
평소에는 내용이 보이지 않다가 클릭하면 펼쳐지면서 내용이 보이는 스크립트다.
보통 펼침 메뉴라고 하는데, 예제 소스와 함께 설명도 함께 한다.
펼침 메뉴 - 클릭하면 접힘, 클릭하면 펼쳐지는 스크립트
펼침 스크립트 예제 소스
아래에 2개의 코드 소스가 있다. 스크립트 소스와 HTML소스다.
스크립트 소스
[code]
<script type="text/javascript">
//<![CDATA[
function clickshow(elem,ID) {
var menu = document.getElementById(ID);
if (elem.className !='클릭할 객체의 이름') {
elem.className = '클릭할 객체의 이름';
menu.style.display = "none";
} else {
elem.className ='opened';
menu.style.display ="block";
}}
//]]>
</script>
[/code]
이 코드를 보면 "클릭할 객체의 이름"라는 것이 있다. 아래의 HTML에서 지정되는 ID를 여기에 복사해 넣으면 되는 것이다.
HTML 코드 소스
[code]
<div class="클릭할 객체의 이름" onclick="clickshow(this,'펼쳐질 객체의 이름')">처음에는 닫힌 폴더</div>
<div id="펼쳐질 객체의 이름" style="display: none;">
내용
</div>
[/code]
이 코드를 보면 "클릭할 객체의 이름"라는 것이 있다. 이 부분은 위의 스크립트의 이름과 같아야 한다.
"펼쳐질 객체의 이름"은 실제로 보여질 부분이다. 스크립트와 굳이 같을 필요는 없다.
펼침 메뉴 코드 예제 설명
위 코드의 원본은 아래 링크에 있다. 이 글에서는 사용법을 이해시키기 위해 일부를 수정해서 설명했다.
원본 출처 : https://manofpro.tistory.com/318
원본 코드는 아래와 같이 되어 있다.
[code]
<s_t3>
<script type="text/javascript">
//<![CDATA[
function clickshow(elem,ID) {
var menu = document.getElementById(ID);
if (elem.className !='closed') {
elem.className = 'closed';
menu.style.display = "none";
} else {
elem.className ='opened';
menu.style.display ="block";
}}
//]]>
</script>
</s_t3>
<s_sidebar_element><!-- 카테고리 -->
<h3 class="closed" onclick="clickshow(this,'categories')">처음에는 닫힌 폴더</h3>
<div id="categories" style="display: none;">
<ol>
<li>첫번째 요소</li>
<li>두번째 요소</li>
<li>그럼 안녕</li>
</ol>
</div>
<br>
<h3 onclick="clickshow(this,'trackblock')">열어두었다가 닫는 폴더</h3>
<div id="trackblock">
<ol>
<li>첫번째 요소</li>
<li>두번째 요소</li>
<li>그럼 안녕</li>
</ol>
</div>
[/code]
위 원본에서는 클릭할 객체의 이름으로 closed를 사용했고, 펼쳐질 객체의 이름으로 categories가 사용되었으니 참고하면 되겠다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
또한, 반대로 평소에는 펼쳐져 있다가 클릭하면 접히는 코드도 함께 있다.
그러나, 맨 위의 예제 코드에서 보듯이 s3이나 h3 같은 것을 꼭 쓸 필요는 없다. 필요에 따라 지우거나 바꿔도 된다.