Canman2005 Posted October 20, 2007 Share Posted October 20, 2007 Hi all I have a page which contains 2 divs and a link, the divs are called DIV1 and DIV2, when the page loads I want to show DIV1, then when the link is clicked, the page would hide DIV1 and show DIV2. When the link is clicked again, it would hide DIV2 and show DIV1. A kinda show and hide div script. But I also need to say on the link when DIV1 is active <a href="#">show DIV2<a href="#"> and when DIV2 is loaded, say <a href="#">show DIV1</a> Can anyone help? I've been working on this for 5 hours and I am getting nowhere fast. I also spent an hour or so looking on Google for a example, but no one seems to have done it this way, or not that I can find. Any help would be fantastic Thanks in advance Dave Link to comment https://forums.phpfreaks.com/topic/74032-hiding-and-showing-a-div/ Share on other sites More sharing options...
michaellunsford Posted October 20, 2007 Share Posted October 20, 2007 well, you could just rewrite the contents of the div -- but here's how to do what you want: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #div1 { visibility:hidden; height:50px; width:50px; left:100px; z-index:1; position:absolute; border:2px solid #000; } #div2 { visibility:visible; height:50px; width:50px; left:200px; z-index:1; position:absolute; border:2px solid #000; } #swap_link { clear:both; } </style> </head> <body> <a href="test.html" onclick="swap_em(); return false;" id="swap_link">show DIV1</a><br /> <div id="div1">Div 1</div> <div id="div2">Div 2</div> <script type="text/javascript"> d1 = document.getElementById('div1').style; d2 = document.getElementById('div2').style; swap = document.getElementById('swap_link'); function swap_em() { if(d1.visibility == 'visible') { d1.visibility = 'hidden'; d2.visibility = 'visible'; swap.innerHTML = 'show DIV1'; } else { d1.visibility = 'visible'; d2.visibility = 'hidden'; swap.innerHTML = 'show DIV2'; } } </script> </body> </html> Link to comment https://forums.phpfreaks.com/topic/74032-hiding-and-showing-a-div/#findComment-374166 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.