Toggle on/off

[BeeRich]

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

[Brian Herold]

BeeRich wrote:

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

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)

[Tony]

BeeRich wrote:

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?

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

[BeeRich]

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

[BeeRich]

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


Tony wrote:

BeeRich wrote:

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?

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

[BeeRich]

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

BeeRich wrote:

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

[Tony]

BeeRich wrote:

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>

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

[BeeRich]

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