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> Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/ 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> Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-654339 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 Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-654538 Share on other sites More sharing options...
Psycho Posted October 1, 2008 Share Posted October 1, 2008 Post the HTML for the divs. Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-654556 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> Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-654566 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> Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-654655 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 Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-663131 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()? Link to comment https://forums.phpfreaks.com/topic/126513-solved-show-hide/#findComment-663164 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.