470,593 Members | 2,509 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,593 developers. It's quick & easy.

Show/Hide Div

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

This is the css code:
Expand|Select|Wrap|Line Numbers
  1. p
  2. {
  3.     background-color:#FFFFCC;
  4.     width:700px;
  5.     color:#000066;
  6. }
  7. .comment
  8. {
  9.     width:300px;
  10.     height:200px;
  11.     border:thin 1px #FF0066;
  12.     background-color:#FFCCFF;
  13.     color:#6600CC;
  14.     visibility:hidden;
  15. }
This is the javascript code:
Expand|Select|Wrap|Line Numbers
  1. function showdiv(demodiv,iState)
  2. {
  3.     if(document.getElementbyId)
  4.     {
  5.         var obj = document.getElementbyId(comment)
  6.         obj.style.visibilty = iState ? "show" : "hidden";
  7.     }
  8. }
This is the 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="showdiv('demodiv',1);"> Add a Comment</a>
<div id="demodiv" class="comment">
<blockquote>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.</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
Feb 8 '07 #1
20 13947
Ansuiya
40
Hey frnds plz help me.. Plz read the code below..

This is the css code:
Code:
Expand|Select|Wrap|Line Numbers
  1. p
  2. {
  3.     background-color:#FFFFCC;
  4.     width:700px;
  5.     color:#000066;
  6. }
  7. .comment
  8. {
  9.     width:300px;
  10.     height:200px;
  11.     border:thin 1px #FF0066;
  12.     background-color:#FFCCFF;
  13.     color:#6600CC;
  14.     visibility:hidden;
This is the javascript code:
Code:
Expand|Select|Wrap|Line Numbers
  1. function showdiv(demodiv,iState)
  2. {
  3.     if(document.getElementbyId)
  4.     {
  5.         var obj = document.getElementbyId(comment)
  6.         obj.style.visibilty = iState ? "show" : "hidden";
  7.     }
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="showdiv('demodiv',1);"> Add a Comment</a>
<div id="demodiv" class="comment">
<blockquote>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.</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
Feb 8 '07 #2
acoder
16,027 Expert Mod 8TB
Try this:
Expand|Select|Wrap|Line Numbers
  1. function showdiv(demodiv,iState) {
  2.     if(document.getElementbyId)
  3.     {
  4.         var obj = document.getElementbyId(demodiv);
  5.         obj.style.visibility = iState ? "show" : "hidden";
  6.     }
Note I changed "comment" to "demodiv" (the variable passed). Also, you had a typo ("i" missing in visibility).
Feb 8 '07 #3
dmjpro
2,476 2GB
try the code ..
obj.style.display = 'block' //for show
='none' //for hide
Feb 8 '07 #4
AricC
1,892 Expert 1GB
I'll move this to Javascript I think it is more appropriate to be in that forum.
Feb 8 '07 #5
acoder
16,027 Expert Mod 8TB
Please do not double post.

This question has been answered in this thread. If you still have problems, post again.
Feb 8 '07 #6
Ansuiya
40
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.

Expand|Select|Wrap|Line Numbers
  1. function showdiv(show)
  2. {
  3.     if(document.getElementbyId)
  4.     {
  5.         var obj = document.getElementbyId(show).style;
  6.         obj.display = obj.display? "":"block";
  7.     }
  8. }
[HTML]<body>

<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>
<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]
Feb 9 '07 #7
Nert
64
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.

Expand|Select|Wrap|Line Numbers
  1. function showdiv(show)
  2. {
  3.     if(document.getElementbyId)
  4.     {
  5.         var obj = document.getElementbyId(show).style;
  6.         obj.display = obj.display? "":"block";
  7.     }
  8. }
[HTML]<body>

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

Expand|Select|Wrap|Line Numbers
  1. <script languange='javascript1.2' >
  2. var objStat = true;
  3. function showdiv(show)
  4. {
  5.     if(document.getElementById){
  6.         var obj = document.getElementById(show);
  7.         if(objStat){               
  8.             obj.style.visibility = 'hidden';
  9.             objStat = false;
  10.         }else{ 
  11.             obj.style.visibility = 'visible';
  12.             objStat = true;
  13.         }
  14.     }
  15. }
  16. </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.
Feb 9 '07 #8
Ansuiya
40
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.
Feb 9 '07 #9
duye
10
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.
Feb 9 '07 #10
Nert
64
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] ?
Feb 9 '07 #11
Ansuiya
40
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..
Feb 9 '07 #12
Ansuiya
40
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
Feb 9 '07 #13
Nert
64
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().
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div >
  3.     <p>
  4.         Do not link to other websites for promoting/traffic generation. Only link to helpful resources
  5.         <a href="javascript:showdiv('demodiv');">  Add a Comment</a><br />
  6.         <span id="demodiv" class="demodiv">
  7.         Do not link to other websites for promoting/traffic generation. Only link to helpful resources
  8.         </span>
  9.     </p>
  10. </div>
  11. </body>
is that the way you wanted it to be?
Feb 9 '07 #14
Ansuiya
40
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="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>
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..
Feb 9 '07 #15
Ansuiya
40
ok wait..

jus chk this out.. http://www.netlobo.com/div_hiding.html

i wanted this kind of output.. the code is given but that is bit complex..
Feb 9 '07 #16
Nert
64
ok wait..

jus chk this out.. http://www.netlobo.com/div_hiding.html

i wanted this kind of output.. the code is given but that is bit complex..
now i got what you really wanted to do..,
here try this code i just made the code from the site you gave a bit smaller and easy to understand.

Expand|Select|Wrap|Line Numbers
  1. <script language='javascript1.2'>
  2. function showdiv(show){    
  3.     var obj = document.getElementById(show).style;
  4.     if(!obj.display)
  5.         obj.display = 'none';
  6.     else
  7.         obj.display = '';        
  8. }
  9. </script>
you can make your own html code or just try this one to test whether it is working.
HTML:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2.     <p>
  3.         Do not link to other websites for promoting/traffic generation. Only link to helpful resources
  4.         <a href="javascript:showdiv('demodiv');">  Add a Comment</a>    
  5.     <div id="demodiv" >
  6.         Do not link to other websites for promoting/traffic generation. Only link to helpful resources
  7.     </div>    
  8.     <input type="text" runat="server" id="tbSearch" /> 
  9.     </p>
  10. </body>
Feb 9 '07 #17
Ansuiya
40
hey nert thanx 4 the help 1 more thing left plz do it.. actualy after clicking it shud show the div.actually it is showing when the page loads.It shud b hidden on page load ,after clicking it shud b visible..
Feb 9 '07 #18
acoder
16,027 Expert Mod 8TB
Use
[HTML]<div id="demodiv" style="display:none;">[/HTML]
Feb 9 '07 #19
Ansuiya
40
Now the problem is solved.Thank u ALL........................
Feb 9 '07 #20
acoder
16,027 Expert Mod 8TB
No problem, you're welcome. A special thanks to Nert for solving most of your problem.
Feb 9 '07 #21

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Ajai Kumar .R | last post: by
10 posts views Thread by oLE | last post: by
3 posts views Thread by alex | last post: by
4 posts views Thread by bridgemanusa | last post: by
7 posts views Thread by FP | last post: by
5 posts views Thread by ali | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.