need to add the .down-arrow class to the div when the accordion opens up

Question

• I created arrow images using css.
• but the problem is i need to add the .down-arrow class to the div when the accordion opens up.
• right now I added one image but not sure how to add the other image.
• can you guys tell me how to fix it
• providing my code below

.down-arrow {
    -ms-transform: rotate(-55deg);

Answer 1

Create an invisible class like this

.invisible{
display:none;
}

And then

var upArrowClassName = 'up-arrow' + (this.props._selected ? '' : ' invisible');
var downArrowClassName = 'down-arrow' + (this.props._selected ? ' invisible' : '');

And then apply these classes to the divs

<div className={upArrowClassName}></div>
<div className={downArrowClassName}></div>

At any given point in time according to the value of this.props._selected one will have the invisible class attached to it and won't be visible.

Answer 2

When an accordion is opened, a new "selected" class is added to the accordion section. Rather than trying to change the class itself, just use this new 'selected' class and change the rotate property on your existing arrow. eg:

.selected .up-arrow {
    transform: rotate(-45deg);
}

Answer 3

You can add the same this.props._selected in your Accordion section component as:

var className1 = this.props._selected ? 'down-arrow' : 'up-arrow';

And change the className in render as:

className={className1}

Also make some changes in .down-arrow class as:

.down-arrow {
  border-top: .15em solid #0b6997;
  border-right: .15em solid #0b6997;
  border-bottom: 0;
  border-left: 0;
  width: .5em;
  height: .5em;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  transition: all .3s ease;
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

Look at the fiddle .