Show/Hide Div

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

This is the css code:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 function showdiv(demodiv,iState)

{

    if(document.getElementbyId)

    {

        var obj = document.getElementbyId(comment)

        obj.style.visibilty = iState ? "show" : "hidden";

    }

}

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

Subscribe Post Reply

14171

Ansuiya

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

This is the css code:
Code:

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

 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="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

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

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

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

 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="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

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

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="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

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

Feb 9 '07 #8

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.

Feb 9 '07 #9

duye

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

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

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

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

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

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

Feb 9 '07 #14

Ansuiya

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

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

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

 <script language='javascript1.2'>

function showdiv(show){    

    var obj = document.getElementById(show).style;

    if(!obj.display)

        obj.display = 'none';

    else

        obj.display = '';        

}

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

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

        Do not link to other websites for promoting/traffic generation. Only link to helpful resources

    </div>    

    <input type="text" runat="server" id="tbSearch" /> 

    </p>

</body>

Feb 9 '07 #17

Ansuiya

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

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

by: Ajai Kumar .R | last post by:

Hai all, I've two or more forms on my app. My requirement is, Have to show the first form asa the user press a button have to hide the first form and show the second form. If the user press the...

.NET Framework

Show/Hide multiple TabControls at runtime

by: Steve | last post by:

Visual Studio 2003 C# Windows: I have a tree view control as my main menu control down the left side of my application. This has 2 Parent Nodes on it (Jobs and Employees). beneath these 2 main...

.NET Framework

show/hide a table row

by: oLE | last post by:

I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...

Javascript

show/hide thingy

by: alex | last post by:

I'd like to have a show/hide widget on my web site, kind of like "show details" / "hide details" in Google Groups. Is there a tutorial explaining how to make them? Google's is a bit complex and...

Javascript

Something more performant than Hide and Show control method?

by: Efkas | last post by:

I have a full custom application with some widged extending Controls like Label and PictureBox. I build a menu with these widgets. When I click on one of them, it calls a function to display...

C# / C Sharp

Swap/restore image while show/hide divs

by: bridgemanusa | last post by:

Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...

Javascript

Show/Hide text field

by: FP | last post by:

I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field...

Javascript

Help about div hide/show

by: ali | last post by:

Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of...

Javascript

show hide layer in IE and Mozilla

by: pamate | last post by:

hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...

HTML / CSS

show pictures in IE correctly but in firefox browser picture is'n shown

by: oranoos3000 | last post by:

hi would you please help me i have a online shopping center that i show pictures of the my product in home page. in the InterExplorer pictures is shown correctly but in Firefox browser is shown...

HTML / CSS

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Similar topics