Run CSS on sibling if other sibling has class

Question

Is there a way to do the following in pure css. If my rds-trigger-button has the class active I want the tab div to be visible, otherwise be hidden.

html:

<div>
   <div class="rds-trigger-button"><span class="rds-carrot">&#9660;</span> Learn More</div>
   <div class="tab">
       Cardigan organic four loko, Etsy art party Godard jean shorts. Chillwave next level letterpress lumbersexual wolf jean shorts, church-key ugh vegan typewriter PBR four loko. Occupy whatever chillwave, pug tote bag organic migas High Life hoodie flannel Schlitz small batch distillery DIY.
   </div>
</div>

css:

.rds-trigger-button{
    border: 1px blue solid;
    width:100px;
    padding:12px;
    position:relative;
}
.rds-trigger-button.active{
    border-bottom:1px white solid;
    z-index:9999;
}
.rds-trigger-button.active + .tabs{
    display:block !important;
}
.rds-carrot{
    font-size:10px;
    color:#ccc;
    padding-right:8px;
}
.tab{
    display:none;
    position:absolute;
    margin-top:-1px;
    width:356px;
    background-color:#fff;
    min-height:50px;
    padding:24px;
    border: 1px #2E51A1 solid;
}

http://jsfiddle.net/0sqoaxxs/2/

Answer 1

The simplified code would be:

.tab {
  display: none;
}
.rds-trigger-button.active + .tab {
  display: block;
}

Updated Example

In the code you posted above, you are using the selector .rds-trigger-button.active + .tabs. Since the element's class is .tab (singular), and not .tabs, it wasn't being applied. In addition, you were also using the selector .rds-trigger-button.active > .tabs in your example you posted. It wasn't working for the same reason and because .tab isn't a direct child of .rds-trigger-button.active.

To clarify, + is an adjacent sibling combinator. As the name implies, it will select the immediate, adjacent sibling element.

In some instances, you may also be interested in the general sibling combinator, ~.