7 Replies Latest reply: May 3, 2012 2:16 PM by oddjewel RSS

    Show/Hide Behavior onClick w/o onscreen gaps

    oddjewel

      I've set an onClick Behavior to show/hide elements within a div id. Everything is working but when the elements are hidden, it leaves blank spaces onscreen. I would like for the rest of the content to move up on the page and fill in the blank space.

       

      I understand this has something to do with setting display:none, but I can't just set the elements to display:none because then they don't show up at all.

       

      Is there a way to set it so that onClick, it applies a class like ".hide" which I could then set to display:none and thereby get all the content to move up?

       

      I have been struggling with this for so long - I KNOW it must be possible, please help!!

       

      Thank you!!

        • 1. Re: Show/Hide Behavior onClick w/o onscreen gaps
          osgood_ MVP

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

          <title>Untitled Document</title>

          <style type="text/css">

          #top {

              width: 300px;

              margin: 0 auto;

              background-color:#CCC;

              padding: 20px;

          }

          #middle {

              width: 300px;

              margin: 0 auto;

              background-color:#9CC;

              padding: 20px;

          }

          #bottom {

              width: 300px;

              margin: 0 auto;

              background-color:#FC3;

              padding: 20px;

          }

           

          </style>

           

           

          <script language="JavaScript">

          function setVisibility(id, visibility) {

          document.getElementById(id).style.display = visibility;

          }

           

          </script>

          </head>

          <body>

          <div id="top">Top</div>

          <div id="middle" onclick="setVisibility('middle', 'none');">Middle</div>

          <div id="bottom" onclick="setVisibility('middle', 'block');">Bottom</div>

          </body>

          </html>

          • 2. Re: Show/Hide Behavior onClick w/o onscreen gaps
            oddjewel Community Member

            Thanks for your fast response - but I want to be clickable is an image, not a div, that already has onClick swap image functions set to it:

             

            <div id="portnav"> <!-------------portnav begins------------>

              <img src="Images/Everything_03.png" name="everything" width="181" height="34" id="everything"

            onclick= "MM_swapImage('everything','','Images/EverythingRollover_03.png','printdesign','','Images /PrintDesign_03.png','illbutton','','Images/Illustration_03.png','webdev','','Images/WebDe v_03.png',1)" />

            </div><!----------------port nav ends.-------------->

             

            I want to set another onClick function that alters the content of another <div> entirely. I want it to be set so that onClick, div <all> is altered by div <illustration> disappearing, and div <printed> and div <webdev> moving up on the screen:

             

            <div id="all">

            <div id="illustration"><!--------------illustration begins.------->

            content content

            </div><!-----------------illustration ends.------------>

             

            <div id="printed"><!--------printed begins.--------->

            content content

            </div><!--------------------------printed ends.----------------->

             

            <div id="webnav"><!--------------webnav begins-------->

            content content

            </div><!---------------------webnav ends.----------------->

             

            </div><!------------all ends here.----------->

             

            Maybe I'm doing this the hard way or over-complicating it? I tried several Dreamweaver behaviors like show/hide and set text of container.... I've seen this done on several websites - what's the best way to do it?

             

            Thank you!

            • 3. Re: Show/Hide Behavior onClick w/o onscreen gaps
              osgood_ MVP

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title>Untitled Document</title>

              <style type="text/css">

              #all {

                  width: 330px;

                  margin: 0 auto;

              }

              #illustration, #printed, #webnav {

                  width: 300px;

                  margin: 0 auto;

                  padding: 15px;

              }

              #illustration {

                  background-color:#CC6;

              }

              #printed {

                  background-color:#FF9;

              }

              #webnav {

                  background-color:#CCC;

              }

              </style>

               

              <script language="JavaScript">

              function setVisibility(id, visibility) {

              document.getElementById(id).style.display = visibility;

              }

              </script>

              </head>

               

              <body>

               

              <div id="all" onclick="setVisibility('illustration', 'none');">

               

              <div id="illustration"><!--- illustration begins --->

               

              Illustration

               

              </div><!--- illustration ends --->

               

               

               

              <div id="printed"><!--- printed begins --->

               

              Printed

               

              </div><!--- printed ends --->

               

               

               

              <div id="webnav"><!--- webnav begins --->

               

              Webnav

               

              </div><!--- webnav ends --->

               

               

               

              </div>

              </body>

              </html>

              • 4. Re: Show/Hide Behavior onClick w/o onscreen gaps
                oddjewel Community Member

                Well it's partially working - it's so close! What should my code look like to hide 2 divs instead of just one? I tried this:

                 

                <div id="all" onclick="setVisibility('illustration', 'none');" "setVisibility('webnav', 'none');"> </div>

                 

                I want to hide 2 divs (illustration & webnav) onClick instead of just the one. Is that possible?

                 

                Thank you!!

                • 5. Re: Show/Hide Behavior onClick w/o onscreen gaps
                  oddjewel Community Member

                  Here's an example of what I'm trying to do (minus the fancy javascript slideshow effects) : http://www.castirondesign.com/work/

                   

                  I have 4 links just like that (Everything, Illustration, Design, Web) and I'd like the contents of the div below to appear/reappear onClick as they do in the example.

                   

                  I managed to get the contents of one div to hide (Illustration) onClick and the following content to move up onscreen... but I need the content from both div:Design and div:Web to disappear onClick:Illustration, and then reappear onClick:Everything.

                  • 6. Re: Show/Hide Behavior onClick w/o onscreen gaps
                    osgood_ MVP

                    Try this:

                     

                     

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                    <title>Untitled Document</title>

                    <style type="text/css">

                    body {

                        font-family: verdana, arial, helvetica, sans-serif;

                        font-size: 12px;

                        letter-spacing: 1px;

                        background-color:#CCC;

                    }

                    #nav {

                        text-align: center;

                        padding-top: 30px;

                    }

                    #nav a {

                        text-decoration: none;

                        background-color:#fff;

                        border: 1px solid #999;

                        color: black;

                        padding: 5px 10px;

                        margin: 0 0 0 10px;

                        display: inline-block;

                    }

                    #all {

                        width: 330px;

                        margin: 40px auto 0 auto;

                    }

                    #illustration, #design, #web {

                        width: 300px;

                        margin: 10px auto 0 auto;

                        padding: 15px;

                        border: 4px solid #fff;

                    }

                    #illustration {

                        background-color:#CC6;

                    }

                    #design {

                        background-color:#FF9;

                    }

                    #web {

                        background-color:#CCC;

                    }

                    </style>

                     

                    <script language="JavaScript">

                    function setVisibility(id, visibility) {

                    document.getElementById(id).style.display = visibility;

                    }

                    </script>

                    </head>

                     

                    <body>

                    <div id="nav"><a href="#" onclick="setVisibility('illustration', 'block'); setVisibility('design', 'block'); setVisibility('web', 'block');">Everything</a><a href="#" onclick="setVisibility('illustration', 'block'); setVisibility('design', 'none'); setVisibility('web', 'none');">Illustration</a> <a href="#" onclick="setVisibility('design', 'block'); setVisibility('illustration', 'none'); setVisibility('web', 'none');">Design</a> <a href="#" onclick="setVisibility('web', 'block'); setVisibility('illustration', 'none'); setVisibility('design', 'none');">Web</a></div>

                     

                    <div id="all">

                     

                    <div id="illustration"><!--- illustration begins --->

                     

                    Illustration

                     

                    </div><!--- illustration ends --->

                     

                     

                     

                     

                    <div id="design"><!--- design begins --->

                     

                    Design

                     

                    </div><!--- design ends --->

                     

                     

                     

                    <div id="web"><!--- web begins --->

                     

                    Web

                     

                    </div><!--- web ends --->

                     

                     

                     

                    </div>

                    </body>

                    </html>

                    • 7. Re: Show/Hide Behavior onClick w/o onscreen gaps
                      oddjewel Community Member

                      That worked PERFECTLY. Thanks so much!