Show/Hide Div

**Ansuiya** · Feb 8 '07, 12:01 PM

show/hide div using javascript

Hey frnds plz help me.. Plz read the code below..

This is the css code:
Code:

Code:

p
{
	background-color:#FFFFCC;
	width:700px;
	color:#000066;
}
.comment
{
	width:300px;
	height:200px;
	border:thin 1px #FF0066;
	background-color:#FFCCFF;
	color:#6600CC;
	visibility:hidden;
}

This is the javascript code:
Code:

Code:

function showdiv(demodiv,iState)
{
	if(document.getElementbyId)
	{
		var obj = document.getElementbyId(comment)
		obj.style.visibilty = iState ? "show" : "hidden";
	}
}

This is the HTML code:
HTML Code:
[HTML]<body>

<p>Be great in act, as you have been in thought.Be great in act, as you have been in thought.Be great in act, as you have been in thought.Be great in act, as you have been in thought.Be great in act, as you have been in thought.<a href="#" onClick="showdi v('demodiv',1); "> Add a Comment</a>
<div id="demodiv" class="comment" >
<blockquote>B e great in act, as you have been in thought.Be great in act, as you have been in thought.Be great in act, as you have been in thought.Be great in act, as you have been in thought.</blockquote></div>
</p>
</body> [/HTML]
Actually i want to show and hide the div on the click of link .It should show like it is include with the paragraph not a different div..So please Help

**acoder** · Feb 8 '07, 12:07 PM

Try this:

Code:

function showdiv(demodiv,iState) {
	if(document.getElementbyId)
	{
		var obj = document.getElementbyId(demodiv);
		obj.style.visibility = iState ? "show" : "hidden";
	}
}

Note I changed "comment" to "demodiv" (the variable passed). Also, you had a typo ("i" missing in visibility).

**dmjpro** · Feb 8 '07, 12:20 PM

try the code ..
obj.style.displ ay = 'block' //for show
='none' //for hide

**AricC** · Feb 8 '07, 04:13 PM

I'll move this to Javascript I think it is more appropriate to be in that forum.

**acoder** · Feb 8 '07, 06:16 PM

Please do not double post.

This question has been answered in this thread. If you still have problems, post again.

**Ansuiya** · Feb 9 '07, 04:55 AM

hii..

sorryy actually i thot it wud b better if i post this in javascript forum after posting here..

I tried the code but its still not working.Please check d code n let me know where i m rong.Css code is same.

Code:

function showdiv(show)
{
	if(document.getElementbyId)
	{
		var obj = document.getElementbyId(show).style;
		obj.display = obj.display? "":"block";
	}
}

[HTML]<body>

<p>Do not link to other websites for promoting/traffic generation. Only link to helpful resources
<a href="javascrip t:showdiv('demo div');"> Add a Comment</a>
<div id="demodiv" class="demodiv" ><blockquote>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
</blockquote></div>
</p>

</body>[/HTML]

**Nert** · Feb 9 '07, 06:32 AM

Originally posted by Ansuiya

hii..

sorryy actually i thot it wud b better if i post this in javascript forum after posting here..

I tried the code but its still not working.Please check d code n let me know where i m rong.Css code is same.

Code:

function showdiv(show)
{
	if(document.getElementbyId)
	{
		var obj = document.getElementbyId(show).style;
		obj.display = obj.display? "":"block";
	}
}

[HTML]<body>

<p>Do not link to other websites for promoting/traffic generation. Only link to helpful resources
<a href="javascrip t:showdiv('demo div');"> Add a Comment</a>
<div id="demodiv" class="demodiv" ><blockquote>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
</blockquote></div>
</p>

</body>[/HTML]

hi Ansuiya,

Here try this i made a little changes from your code.., this works for me i hope your's too.

Code:

<script languange='javascript1.2' >
var objStat = true;
function showdiv(show)
{
	if(document.getElementById){
		var obj = document.getElementById(show);
		if(objStat){   			
			obj.style.visibility = 'hidden';
			objStat = false;
		}else{ 
			obj.style.visibility = 'visible';
			objStat = true;
		}
	}
}
</script>

note: i've noticed that the letter("B") in your getElementById is a small letter, maybe that's reason why your code doesn't work.., because getElementById is different from getElementbyId <-- this would not be recognize by the javascript.

**Ansuiya** · Feb 9 '07, 07:02 AM

Hi Nert
Ur code is working fine.But the output i need is not actually this.Actually i wanted the paragraph shud extend whn i click on div.Like <p>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p> <div> </div> <p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p>

Now when i click on div then the second paragraph shud b adjustable.In your example the div needs its own place every time.May b u r getting my point wht i actually wants to say.

**duye** · Feb 9 '07, 07:22 AM

Originally posted by Ansuiya

Hi Nert
Ur code is working fine.But the output i need is not actually this.Actually i wanted the paragraph shud extend whn i click on div.Like <p>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p> <div> </div> <p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p>

Now when i click on div then the second paragraph shud b adjustable.In your example the div needs its own place every time.May b u r getting my point wht i actually wants to say.

Then you can use <span> to replace your <div>, span is a inline item, div is a block box.

<span id="demodiv" class="demodiv" >
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
</span>

take out blockquote, you don't need it there.

**Nert** · Feb 9 '07, 07:33 AM

Originally posted by Ansuiya

Hi Nert
Ur code is working fine.But the output i need is not actually this.Actually i wanted the paragraph shud extend whn i click on div.Like <p>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p> <div> </div> <p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.
</p>

Now when i click on div then the second paragraph shud b adjustable.In your example the div needs its own place every time.May b u r getting my point wht i actually wants to say.

hi..,

uhmmn i'm a bit confuse, let me try it.., example we have a current paragraph like:
[HTML]<p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.</p>[/HTML]

then when we click a link a div will be set as visible like it belongs to the first parangraph like this?
[HTML]<div><p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.Do not link to other websites for promoting/traffic generation. Only link to helpful resources.</p></div>[/HTML] ?

**Ansuiya** · Feb 9 '07, 07:36 AM

i tried span but n remove the blockquote.but the problem is the space after add a comment is there before the second paragraph.but i wanted there shud b no space when the person clicks on add a comment then the the paragraph shud go below n adjust the comment within that..

**Ansuiya** · Feb 9 '07, 07:45 AM

Originally posted by Nert

hi..,

uhmmn i'm a bit confuse, let me try it.., example we have a current paragraph like:
[HTML]<p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.</p>[/HTML]

then when we click a link a div will be set as visible like it belongs to the first parangraph like this?
[HTML]<div><p> Do not link to other websites for promoting/traffic generation. Only link to helpful resources.Do not link to other websites for promoting/traffic generation. Only link to helpful resources.</p></div>[/HTML] ?

Yes Exactly

**Nert** · Feb 9 '07, 07:47 AM

Originally posted by Ansuiya

i tried span but n remove the blockquote.but the problem is the space after add a comment is there before the second paragraph.but i wanted there shud b no space when the person clicks on add a comment then the the paragraph shud go below n adjust the comment within that..

try the this html code and javascript showdiv().

Code:

<body>
<div >
	<p>
		Do not link to other websites for promoting/traffic generation. Only link to helpful resources
		<a href="javascript:showdiv('demodiv');">  Add a Comment</a><br />
		<span id="demodiv" class="demodiv">
		Do not link to other websites for promoting/traffic generation. Only link to helpful resources
		</span>
	</p>
</div>
</body>

is that the way you wanted it to be?

**Ansuiya** · Feb 9 '07, 07:52 AM

hey nert .. chk this code of urs with a bit change

[HTML]<body>
<div >
<p>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
<a href="javascrip t:showdiv('demo div');"> Add a Comment</a><br />
<span id="demodiv" class="demodiv" >
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
</span>
Do not link to other websites for promoting/traffic generation. Only link to helpful resources
</p>
</div>
</body>[/HTML]

now the space it is taking before clicking on div even in the same paragraph .that space is not needed before clicking ok..