Jump to content
xisto Community
midnitesun

How To Hide And Show A Div On Clicking

Recommended Posts

so here is a simple tutorial of a code i wrote today and thought it may prove useful to someone out here too
what it does is show a div when the page loads and then when user clicks on a link the div is hidden another div is shown ,you can do a lot based on this code

<body onload="hide('xx')"><script language="JavaScript" type="text/javascript">function hide(obj){document.getElementById(obj).style.visibility="hidden";}function show(obj){document.getElementById(obj).style.visibility="visible";}</script><a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a><div id="ss" align="center">this is the div displayed when page loads</div><div id="xx" align="center">now this div is shown because you clicked on the link</div>

Share this post


Link to post
Share on other sites

Looks interesting but could use a demo link of some sorts just in case something could go wrong.

Share this post


Link to post
Share on other sites

yea thanks mike , made some changes and put a demo link too

<body onload="hide('xx')"><script language="JavaScript" type="text/javascript">function hide(obj){document.getElementById(obj).style.visibility="hidden";}function show(obj){document.getElementById(obj).style.visibility="visible";}</script><div id="ss" align="center"><a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a><p>this is the div displayed when page loads</div><div id="xx" align="center"><a href="gg" class="main" onclick="hide('xx');show('ss');return false;">show previous div</a><p>now this div is shown because you clicked on the link</div>

demo

Share this post


Link to post
Share on other sites

...you can do a lot based on this code

I so agree. One of the more readily apparent uses of this is in organizing content on your page. For another demo, if it is not too much, click here. As you can see, the links are sorted by category. Using the script avoids the visual clutter typical of the merest link directories.

I'd like to add, if it is not too much, that there is more than one way to skin a cat, so to speak. It is not too complicated, though. It's a few letters shorter although it does nothing too spectacular.
function hide(obj){document.getElementById(obj).style.display="none";}function show(obj){document.getElementById(obj).style.display="block";}
It is what I actually use.

Be reminded, though, that although you do not present all the content in these divs unless the user desires so, the browser will still download all the stuff in those divs whether the user actually views it or not. It goes to say that this approach is not desirable if you plan to pop long texts or humongous images in and out of visual existence. Unless, of course, you are a cold hearted 3@$+@rd who does not care if the page loads too slowly for us dialup users. Otherwise, it'd probably be better to use an actual hyperlink :lol:

Share this post


Link to post
Share on other sites

Ah I thought that it looked familiar whats funny the site that does the same thing only he uses more code :lol:. Of course I think their is more to it in his coding though. Maybe this could help give your code another possible update in the future.

http://www.flooble.com/scripts/expand.php

JS

<!-- flooble Expandable Content header start --><script language="javascript">// Expandable content script from flooble.com.// For more information please visit://   http://http://www.flooble.com/scripts/expand.php//'>http://http://www.flooble.com/scripts/expand.php// Copyright 2002 Animus Pactum Consulting Inc.//----------------------------------------------var ie4 = false; if(document.all) { ie4 = true; }function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId); if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; } else { link.innerHTML = '+'; d.style.display = 'none'; } }</script><!-- flooble Expandable Content header end   -->

HTML
<!-- flooble Expandable Content box start --><div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td></td><td align="right">[<a title="show/hide" id="exp1167161124_link" href="java script: void(0);" onclick="toggle(this, 'exp1167161124');"  style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table><div id="exp1167161124" style="padding: 3px;"></div></div><noscript><a href="http://http://www.flooble.com/scripts/expand.php expanable content box is made using a free javascript from flooble</a> | Free <a href="http://http://www.flooble.com/scripts/animate.php text javascript script</a></noscript><!-- flooble Expandable Content box end  -->

This is another version tat I know of.

http://forums.xisto.com/no_longer_exists/

I would think the next step would be in your coding would be to try and mimic the examples I showed you and improve on them.

Share this post


Link to post
Share on other sites

very nice piece of code i must say..i was interested in some way of loading certain div from database or another file. when that would be possible and with this code you shown someone could make customizable menus for users on their site easily.what would be the simplest way to load certain div from database? (sorry for OT post)loading divs from database could be interesting beacouse users could maybe create their own menus and store them to database so that later they could easily access them when they login to site...

Edited by matak (see edit history)

Share this post


Link to post
Share on other sites

Quite nice... Very effective if used in the right place. And some other examples too :P. Excellent!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.