dropfaith Posted September 30, 2008 Share Posted September 30, 2008 crap i know i used to have one of these working but im trying to get a show hide to hide all others if a new link is clicked links are below and all elements to show hide are divs the script shows and hides but i cant get it to hide all divs except the most recent one clicked <a href="#" onclick="toggle_visibility('Artist');">Artist</a> <a href="#" onclick="toggle_visibility('Music');">Music</a> <a href="#" onclick="toggle_visibility('Business');">Business</a> <a href="#" onclick="toggle_visibility('Events');">Events</a> <a href="#" onclick="toggle_visibility('Storys');">Stories</a> <a href="#" onclick="toggle_visibility('Food');">Restuarant</a> <script type="text/javascript"> function showElement(layer){ var myLayer = document.getElementById(layer); if(myLayer.style.display=="none"){ myLayer.style.display="block"; myLayer.backgroundPosition="top"; } else { myLayer.style.display="none"; } } </script> Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 30, 2008 Share Posted September 30, 2008 Try this <script type="text/javascript"> function showElement(layer){ var layerList = new Array('Artist','Music','Business','Events','Stories','Food'); for (var i=0; i<layerList.length; i++) { document.getElementById(layer).display = (layer==layerList[i]) ? 'block' : 'none' ; //This section may not be needed - try setting the //background position to top for all divs on page load if (layer==layerList[i]) { document.getElementById(layer).backgroundPosition = 'top'; } } } </script> Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 1, 2008 Author Share Posted October 1, 2008 nope that didnt do anything in fact it wont even open any of the links with that code hrmm Quote Link to comment Share on other sites More sharing options...
Psycho Posted October 1, 2008 Share Posted October 1, 2008 Post the HTML for the divs. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 1, 2008 Author Share Posted October 1, 2008 i got something working <div id="Artist" style="display:none;">divs are all built like this tho </div> Quote Link to comment Share on other sites More sharing options...
Psycho Posted October 1, 2008 Share Posted October 1, 2008 Ah, I had a couple errors. <html> <head> <script type="text/javascript"> function showElement(layer){ var layerList = new Array('Artist','Music','Business','Events','Stories','Food'); for (var i=0; i<layerList.length; i++) { document.getElementById(layerList[i]).style.display = (layer==layerList[i]) ? 'block' : 'none' ; } } </script> </head> <body> <div id="Artist" style="background-position:top;">ARTIST</div> <div id="Music" style="display:none;background-position:top;">MUSIC</div> <div id="Business" style="display:none;background-position:top;">BUSINESS</div> <div id="Events" style="display:none;background-position:top;">EVENTS</div> <div id="Stories" style="display:none;background-position:top;">STORIES</div> <div id="Food" style="display:none;background-position:top;">FOOD</div> <br><br><br><br><BR><BR> <a href="#" onclick="showElement('Artist');">Artist</a><br> <a href="#" onclick="showElement('Music');">Music</a><br> <a href="#" onclick="showElement('Business');">Business</a><br> <a href="#" onclick="showElement('Events');">Events</a><br> <a href="#" onclick="showElement('Stories');">Stories</a><br> <a href="#" onclick="showElement('Food');">Food</a><br> </body> </html> Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 12, 2008 Author Share Posted October 12, 2008 Ah, I had a couple errors. <html> <head> <script type="text/javascript"> function showElement(layer){ var layerList = new Array('Artist','Music','Business','Events','Stories','Food'); for (var i=0; i<layerList.length; i++) { document.getElementById(layerList[i]).style.display = (layer==layerList[i]) ? 'block' : 'none' ; } } </script> </head> <body> <div id="Artist" style="background-position:top;">ARTIST</div> <div id="Music" style="display:none;background-position:top;">MUSIC</div> <div id="Business" style="display:none;background-position:top;">BUSINESS</div> <div id="Events" style="display:none;background-position:top;">EVENTS</div> <div id="Stories" style="display:none;background-position:top;">STORIES</div> <div id="Food" style="display:none;background-position:top;">FOOD</div> <br><br><br><br><BR><BR> <a href="#" onclick="showElement('Artist');">Artist</a><br> <a href="#" onclick="showElement('Music');">Music</a><br> <a href="#" onclick="showElement('Business');">Business</a><br> <a href="#" onclick="showElement('Events');">Events</a><br> <a href="#" onclick="showElement('Stories');">Stories</a><br> <a href="#" onclick="showElement('Food');">Food</a><br> </body> </html> any ideas why this code wont work for a show hide its showing and hiding but not hiding elements if a new element is opened Quote Link to comment Share on other sites More sharing options...
Zane Posted October 12, 2008 Share Posted October 12, 2008 crap i know i used to have one of these working but im trying to get a show hide to hide all others if a new link is clicked links are below and all elements to show hide are divs the script shows and hides but i cant get it to hide all divs except the most recent one clicked Artist Music Business Events Stories Restuarant <br /> function showElement(layer){<br /> var myLayer = document.getElementById(layer);<br /> if(myLayer.style.display=="none"){<br /> myLayer.style.display="block";<br /> myLayer.backgroundPosition="top";<br /> } else {<br /> myLayer.style.display="none";<br /> }<br /> }<br /> where's the code for toggle_visibility()? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.