Skip navigation
oddjewel
oddjewel Calculating status...
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!!

954 Views   7 Replies   Latest reply: oddjewel, May 3, 2012 2:16 PM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    May 2, 2012 7:36 AM   in reply to oddjewel
    Report

    <!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:
  • oddjewel
    Currently Being Moderated
    2. oddjewel,
    May 2, 2012 9:10 AM   in reply to osgood_
    Report

    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','pri ntdesign','','Images/PrintDesign_03.png','illbutton','','Images/Illust ration_03.png','webdev','','Images/WebDev_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!

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

    <!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:
  • oddjewel
    Currently Being Moderated
    4. oddjewel,
    May 2, 2012 12:00 PM   in reply to osgood_
    Report

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

     
    |
    Mark as:
  • oddjewel
    Currently Being Moderated
    5. oddjewel,
    May 2, 2012 12:41 PM   in reply to osgood_
    Report

    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.

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

    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:
  • oddjewel
    Currently Being Moderated
    7. oddjewel,
    May 3, 2012 2:16 PM   in reply to osgood_
    Report

    That worked PERFECTLY. Thanks so much!

     
    |
    Mark as:
Actions

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