CODEWITHSUNDEEP
css
epus
epus

Reputation: 139

CSS show/hide next elements

I'd like to hide the second id with value my2 via CSS:

<div class="node1">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>
<div class="node2">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>

Is it possible as to hide the second my2 div?

E.g. 

.node2 ? #my2 {
     display:none;
}

Thank you!

Upvotes: 5

Views: 7140

Answers (4)

Matt
Matt

Reputation: 1558

Link each button id to each show id IE: #button1 links to #show1. Use the ~ selector in your CSS make the association. Then toggle the display between none and block.

Demo

HTML

  <a id="button1">Button 1</a>
  <a id="button2">Button 2</a>
  <a id="button3">Button 3</a>

  <div class="text">
    <div class="hidden text" id="show1">This is 1</div>
    <div class="hidden text" id="show2">This is 2</div>
    <div class="hidden text" id="show3">This is 3</div>
  </div>

CSS Use the ~ selector to reference each id

CSS

.hidden {
  display: none;
}

#button1:hover ~ .text #show1 {
    display: block;
}

#button2:hover ~ .text #show2{
    display: block;
}

#button3:hover ~ .text #show3{
    display: block
}

.text {
    position: relative;
    top: 10px;
}

NOTE: You could use <div> instead of <a> for the buttons if you wish.

Upvotes: 1

Sumit Sahay
Sumit Sahay

Reputation: 514

Yes possible:

Using ~ you can select all siblings with that class(id your case).

.node2 ~ #my2{ 
  display:none; 
}

You can also use + to select the immediate sibling.

.node2 + #my2{ 
   display:none; 
 }

Hope it helps!

Upvotes: 6

Pepo_rasta
Pepo_rasta

Reputation: 2900

this will hide #my2 which is right after .node2 

.node2 + #my2{
  display:none;
}

NOTE: dont use same id for multiple elements

Upvotes: 1

Alexander Erlandsson
Alexander Erlandsson

Reputation: 36

In order to target the #my2 element after .node2, you'll need to add a + sign between them.

.node2 + #my2 {
  display: none;
}

But as mentioned before, using multiple id's is invalid markup.

Upvotes: 1

Related Questions