How To Hide And Show A Div On Clicking

midnitesun

Dec 26 2006, 11:24 AM

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

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>

Comment/Reply (w/o sign-up)

Saint_Michael

Dec 26 2006, 12:01 PM

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

Comment/Reply (w/o sign-up)

midnitesun

Dec 26 2006, 12:25 PM

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

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>

<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

Comment/Reply (w/o sign-up)

salamangkero

Dec 26 2006, 04:21 PM

QUOTE(midnitesun @ Dec 26 2006, 07:24 PM)

...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.

CODE

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

Comment/Reply (w/o sign-up)

Saint_Michael

Dec 26 2006, 07:37 PM

Ah I thought that it looked familiar whats funny the site that does the same thing only he uses more code

. 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

CODE

<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// 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>

HTML

CODE

<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://www.flooble.com/scripts/expand.php">this expanable content box is made using a
free javascript from flooble</a> | Free <a href="http://www.flooble.com/scripts/animate.php">animated text javascript script</a>
</noscript>

This is another version tat I know of.

http://icant.co.uk/sandbox/footercollapsetables/

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.

Comment/Reply (w/o sign-up)

matak

Dec 26 2006, 08:01 PM

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...

Comment/Reply (w/o sign-up)

delivi

Dec 26 2006, 08:24 PM

wow thats a great piece of code

Comment/Reply (w/o sign-up)

Sharn

Dec 27 2006, 03:34 AM

Wow. Been wondering how to do this for a while now. Thanks a lot for the code, midnitesun!

Comment/Reply (w/o sign-up)

Shining

Jan 15 2007, 08:02 PM

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

. Excellent!

Comment/Reply (w/o sign-up)

farsiscript

Jan 16 2007, 09:44 AM

nice dear midnitesun i really need this tut about close and open div with click , but if i have many div in page what can i do for close and open div's via click ? do you have sample code
like this
http://icant.co.uk/sandbox/footercollapsetables/
but i dont know how can i use it

Comment/Reply (w/o sign-up)

Pages: 1, 2

Recent Queries:-

div show/hide using javascript and php - 160.89 hr back. (1)

Similar Topics

Keywords :

How To Hide Your Important Files And Folders

In Ms. Windows, Without Using Programmes. (7)

Most of people share their computers with others -family, mates, buddy or whoever- and that sharing
threatens their secrets and private file to be revealed, letting some people to know things they
shouldn't know.. My Securing Way: Operation - Camouflage Use an Icon
Editor to generate a 1x1 Transparent Icon and Save it .. > 1 Open CMD.. Start >> Run or Press
WindowsLogo+R.. Lets Say you wanna hide a Folder named " secure " and it's located in
E:\folder\ so Write E: and Press Enter then Write Cd folder and Enter then Attrib +s +h....

How To Protect Your Adsense Account

and never worry about accidentally clicking on your own ads (4)

Have you ever worried about accidentallay clicking on your own Adsense ads? Ever worry that someone
in your family or a friend might happen upon your website and click on your ads? It can happen and
it can get your account shut down quick. Here is what I do so I never have to worry about it. As I
am using windows 2000 I will use that for this example. Windows 98, Me and XP would be similar,
you'd just have to find the location of the files and edit the batch file using the full path
names. The first thing is to locate the file named "hosts" in your system files. The....

Hide Names In Welcome Screen

in XP (0)

Annoyed by seeing many User Names in the Welcome Screen you can remove them Some times a user needs
to be added to access a network resource but the user will not be physically logged in to your
system. In such cases you can remove his/her name from the WelcomeScreen in Xp to do this go to
Registry editor as normal go to HKEY_LOCAL_MACHINE\SOFTWARE\MICROSOFT\WINDOWS NT\CURRENT
VERSION\WINLOGON\SPECIALACCOUNTS\USERLIST\ Right click in the empty space in the right pane and
create a new DWORD value Name this new value "Username" and enter "0" as the data value you are....

How To: Hide The Real Url Of Your Images

using php (27)

Hiding The Real URL To Your Images Using php to protect the real url to your images In this
tutorial I will explain how you can easily hide the real .gif or .jpg url to your images by masking
it with php. This is not hard to do. A basic amount of php knowledge is required for this tutorial.
Note: This will not protect your images for content robbers. 1. Create a new php file and save
it as img.php in the public_html directory 2. Add the following code to img.php. All important
notes and information are explained in the remming. CODE $ext = $_REQUES....

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

(20)

I'm working on a website and a few minutes ago I got very tired from the Internet Explorer
vertical scrollbar. This vertical scrollbar is always there, even if the length of the page does not
require a vertical scrollbar. In this case, Internet Explorer will disable the scrollbar though not
remove it. In my opinion this would be correct behaviour. The disabled however not hidden scrollbar
means that a switch between a preview of your website in Mozilla Firefox and MS Internet Explorer
will lead to an annoying change of the location of your layout. To disable this an....

Looking for How, To, Hide, And, Show, A, Div, On, Clicking

Make A Moderately-secure Password System Using Javascript - using file redirection to hide the password.

How To Hide Your Important Files And Folders - In Ms. Windows, Without Using Programmes.

How To Protect Your Adsense Account - and never worry about accidentally clicking on your own ads

Hide Names In Welcome Screen - in XP

How To: Hide The Real Url Of Your Images - using php

Css Trick: Hide Disabled Internet Explorer Vertical Scrollbar

Searching Video's for How, To, Hide, And, Show, A, Div, On, Clicking

Your Ad Here