Resolved Making a <div> disappear

JumperJack · 02-05-2013, 06:14 PM

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!

sunfighter · 02-05-2013, 09:09 PM

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.

jerry62704 · 02-05-2013, 09:29 PM

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.

JumperJack · 02-05-2013, 09:44 PM

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!

sunfighter · 02-06-2013, 12:54 AM

"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

JumperJack · 02-06-2013, 10:14 AM

very interesting!