더 많은 정보 - expand div

Question

Javascript/HTML의 "more info"스크립트에 대한 도움이 조금 있습니다.

현재 코드 :

<div id="information"> 
    Content 
    <div id="more_information" style="display:none;"> 
     More content 
    </div> 
<a href="#" onclick="showhide('more_information');">More information</a>​​​​​​​​ 
</div> 

자바 스크립트 :

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { 
eval("document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
info = document.getElementById(layer_ref); 
info.style.display = state; 
} 
}​ 

건배

Answer 1

JS :

function showhide(layer_ref) { 
    var el = document.getElementById(layer_ref); 
    var visible = el.style.display == 'block' // current state 
    el.style.display = visible ? 'none' : 'block'; 
    return !visible; // new state (true=visible,false=invisible) 
} 

HTML :

0 내가 jQuery을 사용하는 것이 좋습니다

<a href="#" onclick="if(showhide('more_information')){this.innerHTML='Less information'}else{this.innerHTML='More information'};return false;">More information</a>​​​​​​​​ 

Answer 2

이 많이 더 쉽게 만들어 : 당신이 "more_information"id가 하나 개의 DOM 요소가있는 경우

가

jQuery("#information a").click(function(){ 
    jQuery(this).parent().find("#more_information").toggle(); 
}); 

Answer 3

그것은에만 작동합니다 :

function showhide(nodeId) { 
    var node = document.getElementById(nodeId); 
    if (node) { 
     node.style.display = node.offsetWidth ? 'none' : 'block'; 
    } 
}​ 

당신이 만약 페이지에서 이와 유사한 구조가 거의 없다면 다음을 사용해야합니다.

HTML :

<div id="information"> 
    Content 
    <div id="more_information" style="display:none;"> 
     More content 
    </div> 
    <a href="#" onclick="showhide(this); return false;">More information</a>​​​​​​​​ 
</div> 

JS :

function showhide(node) { 
    var moreNode = node.previousSibling, i = 5; 
    while (moreNode.nodeType != 1 && i--) { 
     moreNode = moreNode.previousSibling; 
    } 

    if (moreNode && moreNode.nodeType == 1) { 
     moreNode.style.display = moreNode.offsetWidth ? 'none' : 'block'; 
    } 
}​