Invisible to Visible DIV?

Discussion in 'CSS' started by le007, Nov 10, 2011.

0
  1. #1
    Hi there,
    Before I start coding, I just wanted to know can I have a linkable menu that when a link is clicked, a div will appear?

    The reason for this is that I'm incorporating a J.S. slideshow for the background image and want a div to appear only when a link is clicked.

    Any examples or code would be great.
    Thanks
     
    le007, Nov 10, 2011 IP
  2. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #2
    Hi,

    I'm not sure if this can be done with pure CSS but it definitely can be accomplished with a combo of CSS and javascript. I've googled for a few tutorials and found something like this:

    <style type="text/css">
    #hello {
    display: none;
    position: absolute;
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background: lightblue;
    }
    </style>
    <script type="text/javascript">
    var show = function (toggleID, me){
    toggleID.style.left = me.offsetLeft;
    toggleID.style.top = me.offsetTop + me.fontSize;
    toggleID.style.display = "block";
    };
    </script>
    <a href="javascript:void(0)" onclick="show(document.getElementById('hello'), this);">SHOW</a>
    <div id="hello"><a href="javascript:void(0)" onclick="this.parentNode.style.display='none'">BLAH</a></div>

    This script is from the Dynamic Drive forums.
     
    benny306, Nov 11, 2011 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Hi Benny306,

    Excellent, thats precisely what I'm after!
    Cheers
     
    le007, Nov 12, 2011 IP