CodingForums.com - Resolved Making a <div> disappear

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Resolved Making a <div> disappear (http://www.codingforums.com/showthread.php?t=287107)

Making a <div> disappear

Hello,

I'm quite new to webdesign. I've got a basic knowledge about HTML and CSS, but none whatsoever regarding JS or any other coding language.

I'm right now trying to get something done, which I think is incredibly simple, but I cannot seem to find a way to do it.

I have got two DIVs, one (top1) exactly on top of the other (bot1). What I want, is to make the top one disappear when someone clicks on the DIV. I don't even want it to reappear, it just has to disappear once when it's clicked.

After some internet research, I think it could be done with a tiny bit of script, but I cannot seem to get it right. Or is there maybe even a more simple way to solve this?

Here is the complete code of my page:

Code:

<html>

<head>

        <link href="index_v1-1.css" type="text/css" charset="UTF-8" rel="stylesheet"/>

        <title>test page</title>

</head>



<body>

<div id="container">

    <div id="bot1"></div>

        <div id="top1"></div>

</div>

</html>

Code:

body{ 

        margin:0px;

}



#container {

        width:100%;

    height:100%;

    position:relative;

}



#bot1 {

    width:25%;

    height:100%;

    position:absolute;

        background-color:#000066;

    top:0%;

    left:0%;

}

#top1 {

    width:25%;

    height:100%;

    position:absolute;

        background-color:#660000;

    top:0%;

    left:0%;

        z-index:10;

}

I hope someone can help me out, it would be really appreciated.

Thank you in advance!

Any time you want to change your page 9 out of ten times it's done with javascript. Advise you to start studying. Js is used below

Code:

<body>

<div id="container">

    <div id="bot1"></div>

        <div id="top1" onclick="goAway();"></div>

</div>

<script type="text/javascript">

function goAway()

{

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

}

</script>

</body>

</html>

Just replace your code with this from the body tag down.

Sunfighter, didn't I see a post here where this was done via CSS alone? The half hour search didn't find it, but I'm pretty sure it was here.

ah sunfighter, that worked perfectly, and indeed, it was just such a small bit of code. i'll definitely start learning js!

also, i have found traces of such thing being possible in css only, but i couldn't make it work myself. obviously that does not mean it's impossible, so if someone knows that would definitely be interesting as well.

thanks a lot for your fast help!

"A css solution"(?) Every time I say yes or no absolutely someone comes along and shows that it's possible. You can use the hover feature of css to do this temporarily, but I don't think that can be changed to a permanent thing.

css could do this with the :target feature< but we have to change the html and add to the css;
Added to css:

Code:

div #top1:target {

    background-color:#000066;

}

And the html looks like this:

Code:

<body>

<div id="container">

    <div id="bot1"></div>

        <a href="#top1"><div id="top1"></div></a>

</div>

</body>

But that did not bring the bot1 div to the top, it just changed the color of the top1 div. A magic trick.

BUT now we use z-index. So to the #bot1 css mark up we add:

Code:

z-index: 5;

color: white;

A z-index and we make text readable.

To the css :target we CHANGE it to:

Code:

div #top1:target {

    z-index:3;

}

So it's z-index will change to less then bot1.
And we change this:

Code:

<div id="bot1">Bottom</div>

So we have something to prove bot1 came to the top.
The total comes out:

Code:

#bot1 {

    width:25%;

    height:100%;

    position:absolute;

        background-color:#000066;

    top:0%;

    left:0%;

        z-index: 5;

        color: white;

}

#top1 {

    width:25%;

    height:100%;

    position:absolute;

        background-color:#660000;

    top:0%;

    left:0%;

        z-index:10;

}

div #top1:target {

    z-index:3;

}

</style>

</head>



<body>

<div id="container">

    <div id="bot1">Bottom</div>

        <a href="#top1"><div id="top1"></div></a>

</div>

</body>

And yeah we get css to work on click and bring a div to the top.

Thanks for making do some research. But the javascript is the fastest way and only 2% of users have it turned off and the heck with them. They're probably paranoid and don't care if they see the whole web.

Code:

div #top1:target {

    display:none;

}

Also works