Toggle on/off

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

BeeRich - 29 Jun 2006 15:52 GMT

Hi folks. Sorry for the semi-cross-posting in the CSS group. I have a
question with regards to turning on and off a div.

I am doing AJAX calls for comments on a topic. Upon clicking, comments
are looked up for that record, and presented below the item. Initally,
that div has a unique id, so it's difficult to target, but I can find
it using some passed parameters.

When it is first created, there is no attribute set to display. So
display essentially = "". I want to modify the div id so that the
comments are then hidden. The problem is, the only choice I have is to
set the display to "none", which collapses the whole area, so the
original display is somewhat collapsed as well.

Is there any way I can keep the structure of the div, but hide its
contents, without collapsing its original entry?

This is difficult to explain. Just trying to find a display option for
a div that doesn't destroy the structure that I need.

Cheers

Reply to this Message

Brian Herold - 29 Jun 2006 16:30 GMT

> Hi folks. Sorry for the semi-cross-posting in the CSS group. I have a
> question with regards to turning on and off a div.
[quoted text clipped - 17 lines]
>
> Cheers

Can you just do visibility:hidden for the div? (this should keep the
div from being removed from the layout like display:none does - it
should maintain the document's flow)

Reply to this Message

BeeRich - 29 Jun 2006 23:31 GMT

Hi Brian. I never thought of that. I'll give it a whirl tonight.

Reply to this Message

BeeRich - 30 Jun 2006 00:19 GMT

Unfortunately that didn't show anything in FireFox, Brian. No errors
as well. Thanks for the idea though. It appears that the text would
go hidden, but the space wouldn't collapse either, so that is a cousin
of display:none.

Cheers

> Hi Brian. I never thought of that. I'll give it a whirl tonight.

Reply to this Message

Tony - 29 Jun 2006 18:19 GMT

> Hi folks. Sorry for the semi-cross-posting in the CSS group. I have a
> question with regards to turning on and off a div.

<...>

> This is difficult to explain. Just trying to find a display option for
> a div that doesn't destroy the structure that I need.

Perhaps it would be easier to explain with a link & sample?

Based on what you say, you have this:

<div id="something">
<div>this is DIV1</div>
<div>this is DIV2</div>
<div>this is DIV3</div>
</div>

And you want to show/hide just DIV1 - is that a correct assessment, or
did I totally misread what you want?

Signature

"The most convoluted explanation that fits all of the made-up facts is
the most likely to be believed by conspiracy theorists. Fitting the
actual facts is optional."

Reply to this Message

BeeRich - 29 Jun 2006 23:51 GMT

Hi Tony. Thanks for the reply. Unfortunately I can't post. But I can
explain.

<div class="location">LOCATION1 WITH JS ONCLICK CALL</div>
<div id="comment1"></div>

Upon clicking of LOCATION1, an AJAX call fills comment1. The div fills
below as expected. Upon clicking LOCATION1 again, I want to return the
comment1 div back to its original state. Since my options were to set
its display to "none", the whole thing disappeared, having an accordion
effect on the stuff that is below these two lines.

I will try setting visibility from visible to hidden.

Cheers

> > Hi folks. Sorry for the semi-cross-posting in the CSS group. I have a
> > question with regards to turning on and off a div.
[quoted text clipped - 19 lines]
> the most likely to be believed by conspiracy theorists. Fitting the
> actual facts is optional."

Reply to this Message

Tony - 30 Jun 2006 01:25 GMT

> Hi Tony. Thanks for the reply. Unfortunately I can't post. But I can
> explain.

Just a note - it is generally considered better to respond at the
bottom, or to interlave your responses (as I am here) - it provides
better context.

> <div class="location">LOCATION1 WITH JS ONCLICK CALL</div>
> <div id="comment1"></div>
[quoted text clipped - 4 lines]
> its display to "none", the whole thing disappeared, having an accordion
> effect on the stuff that is below these two lines.

OK - so as I understand it, then, comment1 exists before you make the
ajax call. You then make the call & put the response into comment1.
Using innerHTML, by any chance?

How about:
document.getElementById('comment1').innerHTML = '';

That will clear the div but keep it in its place - now empty.

> I will try setting visibility from visible to hidden.

That will preserve all the space for the DIV, but make it unseen. That
may do what you want.

Signature

"The most convoluted explanation that fits all of the made-up facts is
the most likely to be believed by conspiracy theorists. Fitting the
actual facts is optional."

Reply to this Message

BeeRich - 30 Jun 2006 10:26 GMT

Hi Tony. I got it to work. I went back to the display: none routine.
I'm relatively new to JS, so my previous attempts got me messing up my
IF routine.

Cheers

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / June 2006

Toggle on/off