By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,479 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,479 IT Pros & Developers. It's quick & easy.

Show/Hide Div

P: 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
Share this Question
Share on Google+
20 Replies

P: 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
Expert Mod 15k+
P: 16,027
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
100+
P: 2,476
try the code ..
obj.style.display = 'block' //for show
='none' //for hide
Feb 8 '07 #4

Expert 100+
P: 1,892
I'll move this to Javascript I think it is more appropriate to be in that forum.
Feb 8 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Please do not double post.

This question has been answered in this thread. If you still have problems, post again.
Feb 8 '07 #6

P: 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
P: 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

P: 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

P: 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
P: 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

P: 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

P: 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
P: 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

P: 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

P: 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
P: 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

P: 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
Expert Mod 15k+
P: 16,027
Use
[HTML]<div id="demodiv" style="display:none;">[/HTML]
Feb 9 '07 #19

P: 40
Now the problem is solved.Thank u ALL........................
Feb 9 '07 #20

acoder
Expert Mod 15k+
P: 16,027
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.