Change css style of an element by clicking another - css

Question

I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?

Answer 1

You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>

Answer 2

You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>

Answer 3

You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.

Answer 4

You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});

Answer 5

I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.

Answer 6

With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!