Skip navigation
oddjewel
Currently Being Moderated

Show/Hide Behavior onClick w/o onscreen gaps

May 2, 2012 7:19 AM

Tags: #cs5 #image #class #div #dreamweaver #display #space #object #behavior #none #hide #show #inline #element #block #gap

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!!

 
Replies
  • Currently Being Moderated
    May 2, 2012 7:36 AM   in reply to oddjewel

    <!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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2012 10:05 AM   in reply to oddjewel

    <!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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2012 12:31 AM   in reply to oddjewel

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points