Toggle on/off

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • BeeRich
    #1

    Toggle on/off

    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

    Tags: None
    • Brian Herold
      #2
      Re: Toggle on/off

      BeeRich wrote:[color=blue]
      > 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
      >[/color]

      Can you just do visibility:hidd en 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)

        Comment

        • Tony
          #3
          Re: Toggle on/off

          BeeRich wrote:[color=blue]
          > 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.[/color]
          <...>[color=blue]
          > This is difficult to explain. Just trying to find a display option for
          > a div that doesn't destroy the structure that I need.[/color]

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

            Comment

            • BeeRich
              #4
              Re: Toggle on/off

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

                Comment

                • BeeRich
                  #5
                  Re: Toggle on/off

                  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:[color=blue]
                  > BeeRich wrote:[color=green]
                  > > 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.[/color]
                  > <...>[color=green]
                  > > This is difficult to explain. Just trying to find a display option for
                  > > a div that doesn't destroy the structure that I need.[/color]
                  >
                  > 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."[/color]

                    Comment

                    • BeeRich
                      #6
                      Re: Toggle on/off

                      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:[color=blue]
                      > Hi Brian. I never thought of that. I'll give it a whirl tonight.[/color]

                        Comment

                        • Tony
                          #7
                          Re: Toggle on/off

                          BeeRich wrote:[color=blue]
                          > Hi Tony. Thanks for the reply. Unfortunately I can't post. But I can
                          > explain.[/color]

                          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.
                          [color=blue]
                          > <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.[/color]

                          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.getEle mentById('comme nt1').innerHTML = '';

                          That will clear the div but keep it in its place - now empty.
                          [color=blue]
                          > I will try setting visibility from visible to hidden.[/color]

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

                            Comment

                            • BeeRich
                              #8
                              Re: Toggle on/off

                              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

                                Comment

                                Previous template Next
                                Working...