홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

[자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴

세상이야기.      조회 수 1653 추천 수 0 2011.05.10 10:43:04


 <html>
<head>
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent()
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
</head>

<body>
<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript? </h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript? </h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML? </h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

J003.jpg

위 소스 내용중 색상이 있는 글자를 자신이 사용하고자 하는 성격에 맞게 바꿔 주면 됩니다.

 

출처: webmadang.net

 

List of Articles
번호 제목 글쓴이 날짜 조회 수
32 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 165
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 121
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 147
» [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1653
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3354
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3003
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1934
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1815
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1711
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2473
XE Login