1

I have an accordeon in which is build like this:

    <div class="panel">
       <div class="panel-heading"></div>
       <div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
   </div>

CSS build like this:

.panel{
       .panel-heading{}
       .panel-content{}
}

QUESTION:

when panel-content is collpase/collapse in i need to change my css in the panel-heading .

Is it even possible when they are on the same level?

dennis schütz
  • 383
  • 4
  • 21

2 Answers2

1

It's possible to target elements coming after, at the same depth level, but not before. With this HTML (switched elements):

<div class="panel">
    <div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
    <div class="panel-heading"></div>  
</div>

You could have done this:

.panel {
    .panel-heading {}
    .panel-content {
        &.collapse.in + .panel-heading {
            // Changes here
        }
    }
}

A better way to do it (IMO) would be to use your collapse class on the container:

<div class="panel collapsed">
    <div class="panel-heading"></div> 
    <div class="panel-content"></div> 
</div>

And the Sass:

.panel {
    .panel-heading {}
    .panel-content {}
    &.collapsed {
        .panel-heading {
            // Changes here
        }
    }
}

But I'm perfectly aware this is not always possible, due to framework restrictions.

zessx
  • 68,042
  • 28
  • 135
  • 158
0

This is possible, but not in the way you HTML is structured right now. You can target siblings like so:

.bother + .sister {
  color: red;
}

This will result in any .sister elements right next to .brother elements to have red text. You can also use ~ instead of + so it's not a close sibling, but instead one that's simply further down the tree, but still a sibling. The problem is, this only works one way. So there's no way for the .panel-content to look back and see if the siblings above it match the selector.

GMchris
  • 5,439
  • 4
  • 22
  • 40