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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -