javascript - How can I make a list of show/hide sections? -
for website, i'm making list of show/hide links (java script , css), , want each 1 different. however, when try that, show/hide links after first 1 don't work. help? suggestions? thanks!
function showhide(shid) { if (document.getelementbyid(shid)) { if (document.getelementbyid(shid+'-show').style.display != 'none') { document.getelementbyid(shid+'-show').style.display = 'none'; document.getelementbyid(shid).style.display = 'block'; } else { document.getelementbyid(shid+'-show').style.display = 'inline'; document.getelementbyid(shid).style.display = 'none'; } } }
.more { display: none; a.showlink, a.hidelink { text-decoration: none; color: #36f; padding-left: 8px; background: transparent url(down.gif) no-repeat left; } a.hidelink { background: transparent url(up.gif) no-repeat left; }
<a href="#" id="example-show" class="showlink" onclick="showhide('example');return false;"><span class="sec">section 1-</span><span class="seccontent">site navigation</span></a> <div id="example" class="more"> <a href="#" id="example-hide" class="hidelink" onclick="showhide('example');return false;"><span class="sec">section 1-</span><span class="seccontent">site navigation</span></a> <p>example content</p> </div> <a href="#" id="example-show" class="showlink" onclick="showhide('example');return false;"><span class="sec">section 2-</span><span class="seccontent">products</span></a> <div id="example" class="more"> <a href="#" id="example-hide" class="hidelink" onclick="showhide('example');return false;"><span class="sec">section 2-</span><span class="seccontent">products</span></a> <p>stuffs</p> </div>
you cant use tow elements same id.
try 1 "sec1" , 2nd "sec2"
<a href="#" id="example-show" class="showlink" onclick="showhide('sec1');return false;"><span class="sec">section 1-</span><span class="seccontent">site navigation</span></a> <div id="sec1" class="more"> <a href="#" id="example-hide" class="hidelink" onclick="showhide('sec1');return false;"><span class="sec">section 1-</span><span class="seccontent">site navigation</span></a> <p>example content</p> </div> <a href="#" id="a1" class="showlink" onclick="showhide('sec2');return false;"><span class="sec">section 2-</span><span class="seccontent">products</span></a> <div id="sec2" class="more"> <a href="#" id="a2" class="hidelink" onclick="showhide('sec2');return false;"><span class="sec">section 2-</span><span class="seccontent">products</span></a> <p>stuffs</p> </div>
Comments
Post a Comment