8 Replies Latest reply: Aug 13, 2012 7:51 AM by jyeager11 RSS

    Looking for simple "hide/unhide" method...

    jyeager11 Community Member

      Hi,

       

      I'm looking for a way to hide/unhide specifically targeted divs.

       

      Example :
      <a href="hide_div1, hide_div2, show_div3">Link</a>

      <a href="hide_div1, hide_div3, show_div2">Link</a>

      <a href="hide_div2, hide_div3, show_div1">Link</a>

       

      <div id="div1">Test 1</div>

      <div id="div2">Test 2</div>

      <div id="div3">Test 3</div>

       

      Know what I mean?

        • 2. Re: Looking for simple "hide/unhide" method...
          jyeager11 Community Member

          Close, but that example doesn't seem to let me show more than 1 div at a time. What if I want to show #1 and #2, but hide #3?

          • 3. Re: Looking for simple "hide/unhide" method...
            adninjastrator Community Member

            Take a look at the source code on:

            http://www.olympicdiscoverytrail.com/

            There are multiple hidden <div>s on the far left and far right columns..... the "Read More" sections.

            You can show and hide each independant of the others... having as many showing as you want.

             

            <script type="text/javascript" language="JavaScript">

            <!--

            function HideContent(d) {

            document.getElementById(d).style.display = "none";

            }

            function ShowContent(d) {

            document.getElementById(d).style.display = "block";

            }

            function ReverseDisplay(d) {

            if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }

            else { document.getElementById(d).style.display = "none"; }

            }

            //-->

            </script>

            then give each of the <div>s a unique name:

            <div id="home1" style="display:none">

            Best wishes,

            Adninjastrator

            • 4. Re: Looking for simple "hide/unhide" method...
              jyeager11 Community Member

              *EXACTLY* what I was looking for, thank you!

               

              I don't suppose you'd know how to insert the default jQuery FadeIn/FadeOut function in there, so that appearing/disappearing block objects can do so with a slight fade?

               

              (I realize I'm pushing my luck here, the info you provided already bailed out of my jam -- this would just make it sweeter.)

              • 5. Re: Looking for simple "hide/unhide" method...
                jyeager11 Community Member

                Small problem with this method I just uncovered...

                 

                If two divs are placed one atop the other, with one displayed and the other one not... regardless of which one is shown or hidden, you won't be able to interact with the contents of the one stacked lower, because although it's showing (and the other div on top of it is currently not), that invisible div still counts in the flow of the page, it seems.

                 

                In other words, just because it's invisible doesn't mean it's not blocking my cursor from clicking on the visible div underneath it.

                 

                I can only ever interact with the div that's stacked on top, and only when it's visible.

                • 6. Re: Looking for simple "hide/unhide" method...
                  adninjastrator Community Member

                  You must be using the hide/show in a way that I am not because I cannot replicate your problem. Interaction with the lower <div> works just fine, whether or not the top <div> is visible or invisible.

                  Best to post a test page illustrating your problem.

                  Here is my test page:

                  http://www.olympicdiscoverytrail.com/index_show_hide_test.html

                  note in the far left column, "Forests of the Pacific Northwest"... has a "Read More"... whose content (according to you, should cover up the interactive part of "Rivers and Bridges"

                  But even with the top <div> not displaying, I can interact with the "Rivers and Bridges" section just fine, including a link embed in the none displayed part... open the "Read More" of "Rivers and Bridges" to see what I mean.

                  Best wishes,

                  Adninjastrator

                  • 7. Re: Looking for simple "hide/unhide" method...
                    wefwniobickna

                    Can be hidden by absolute positioning  www.realmapa.com

                    • 8. Re: Looking for simple "hide/unhide" method...
                      jyeager11 Community Member

                      You are correct, the problem was not what I thought it was. It was a z-indexing issue, which I've fixed. So the link you provided ended up being great for my purposes.

                       

                      Now, how difficult would it be to add the fadeIn/fadeOut jQuery behavior to this?

                       

                      Current code :

                      function HideContent(d) {

                          document.getElementById(d).style.display = "none";

                      }

                      function ShowContent(d) {

                          document.getElementById(d).style.display = "block";

                      }

                      function ReverseDisplay(d) {

                          if ( document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }

                          else { document.getElementById(d).style.display = "none"; }

                      }

                       

                      http://api.jquery.com/fadeIn/
                      http://api.jquery.com/fadeOut/

                       

                      I honestly don't know enough about jQuery to integrate the fade intelligently (or in any way that would actually work).

                       

                      In other words, when hiding an object, don't have it instantly disappear : have it fade out. When showing it, same thing : fade it in.

                       

                      This would be all kinds of awesome.