/    Sign up×
Community /Pin to ProfileBookmark

hide show div question

Copy linkTweet thisAlerts:
Nov 26.2007

Hello guys,

I have a div which in it there is a link. I have another div which is hidden. When the link is clicked the hidden div becomes visible and vice versa.

The question is this:
When the hidden div becomes visible it is going outside the wrapper div which the hidden div is contained within it. How am i going to do it so that when the hidden div becomes visible the content increases in height so that if there is content after the hidden div the content shift lower and the hidden div has its space to show.

thanks.

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 27.2007 — Show the document.
Copy linkTweet thisAlerts:
@Kaiser28authorNov 27.2007 — This is the javascript i am using:

function ToggleFeedback(divToToggle){

if(document.getElementById(divToToggle).style.visibility == "hidden"){

document.getElementById(divToToggle).style.visibility = "visible";

}

else{

document.getElementById(divToToggle).style.visibility = "hidden";

}

}

These are the divs

<div id="divFeedbackLink" onmouseover="style.cursor='pointer';" onclick="JavaScript: ToggleFeedback('divFeedback');"><a>Link to open the feedback form</a></div>

<div id="divFeedback">Here goes the comments div</div>

and i have the css style visibility set to hidden.

positions are absolute.
Copy linkTweet thisAlerts:
@FangNov 27.2007 — Remove the absolute positioning.
Copy linkTweet thisAlerts:
@Kaiser28authorNov 27.2007 — and how am i going to set the divs on the bottom of the wrapper div? if i remove the absolute they go up. Sry but am a bit newb
Copy linkTweet thisAlerts:
@FangNov 27.2007 — Something like this, using [I]bottom[/I]:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;position&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function ToggleFeedback(divToToggle){
var obj=document.getElementById(divToToggle);
obj.style.visibility = (obj.style.visibility == "hidden")? "visible" : "hidden";
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
#wrapper {position:relative;height:500px; border:1px solid red;}
#divFeedbackLink {position:absolute;bottom:0; border:1px solid blue;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper"&gt;wrapper
&lt;div id="divFeedbackLink"&gt;
&lt;a href="noJavaScript.htm" onclick="ToggleFeedback('divFeedback'); return false;"&gt;Link to open the feedback form&lt;/a&gt;
&lt;div id="divFeedback"&gt;Here goes the comments div&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Kaiser28authorNov 27.2007 — I posted some pictures of the problem

i want that when the div is opened the wrappers increase so that it doesnt go out. thanks

[upl-file uuid=5064e95d-1e5a-44fb-9581-987f7bd0248a size=38kB]Div not opened.JPG[/upl-file]

[upl-file uuid=2db26b4a-a2f7-4a35-9b5b-48e6b98ace15 size=36kB]Div opened.JPG[/upl-file]
Copy linkTweet thisAlerts:
@FangNov 27.2007 — You will have to give the full document. We can not see what you are doing.
Copy linkTweet thisAlerts:
@Kaiser28authorNov 27.2007 — Ok lets do it like this:

<div id="Content">

Here goes all the content, images, paragraphs etc etc not always the same amount of data..

<div id="Link">Link to show/Hide the hidden div</div> Note: This should always be after the content at the end.

<div id="hiddenDiv">Here goes the hidden div with some content</div>

</div>

Lets say the content div is 500px in height

The link div is at the bottom of the content

The hidden div is 100px in height

Now the question:

When the link DIV is clicked and the hidden div becomes visible the content div should enlarge its height by 100 so that the hidden div can be displayed properly inside the content div. Also its should not care how much content in the content div there is i.e. the link should always be at the bottom and the content div should get taller when the hidden div is shown.

Hope you understand hehe ?

Thanks.
Copy linkTweet thisAlerts:
@FangNov 28.2007 — If you want that to work independent of content then define no heights nor use position absolute.
Copy linkTweet thisAlerts:
@Kaiser28authorNov 28.2007 — but will the div go outside the content then or not ?
Copy linkTweet thisAlerts:
@FangNov 28.2007 — The content should not spill out, but it does depend on the type of content. Objects and tables can cause problems.
Copy linkTweet thisAlerts:
@udaynNov 28.2007 — Hello guys,

I have a div which in it there is a link. I have another div which is hidden. When the link is clicked the hidden div becomes visible and vice versa.

The question is this:

When the hidden div becomes visible it is going outside the wrapper div which the hidden div is contained within it. How am i going to do it so that when the hidden div becomes visible the content increases in height so that if there is content after the hidden div the content shift lower and the hidden div has its space to show.

thanks.[/QUOTE]
this
Copy linkTweet thisAlerts:
@Kaiser28authorNov 29.2007 — Thanks for all the replies.

Problem solved, i scraped the page and rebuilt it from the beginning, the problem was that i used the absolute positioning, now im floating everything and everything is ok.

?
×

Success!

Help @Kaiser28 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...