Toggle class for one element when accordion is pressed-CodePudding

I'm currently making a QA page using Jquery UI accordion. Right now I managed to make several accordion but the problem is, I need to ( ) part turns to (-) when the accordion is pressed, and the jquery I made make all the ( ) button turns at the same time whenever I pressed an accordion button.

How can I make the button turn according to when it's corresponding accordion is collapsed ?

Here is my simplified code

$(function() {
  $("#accordion").accordion({
    collapsible: true
  });
});

$(function() {
  $('.qa_accordion_button').click(function() {
    $('.button_outer').toggleClass('pressed');
    $(this).removeClass('pressed');
  });
});

.button_outer {
  color: #ecf0f1;
  background: #e74c3c;
  width: 40px;
  height: 40px;
  border: 0;
  font-size: 1.5em;
  position: relative;
  border-radius: 2rem;
}

.button_outer .minus {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

.button_outer .minus:first-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

.button_outer .minus:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
  transform: rotate(90deg);
}

.pressed .minus {
  transform: rotate(180deg);
}

.pressed .minus:last-child {
  left: 50%;
  right: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<div id="accordion">
  <div >
    <p>ACCORDION BUTTON 1</p>
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <p>ANSWER 1</p>
    </div>
  </div>
  <div >
    <p>ACCORDION BUTTON 2</p>
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <p>ANSWER 2</p>
    </div>
  </div>
</div>

CodePudding user response：

To do what you require hook an event to the beforeActivate and create event handlers of the accordion. Using the arguments passed to these handlers you can get references to the current and previous headers and set the relevant classes on the buttons within them.

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    beforeActivate: (e, ui) => {
      ui.newHeader.find('.button_outer').addClass('pressed');
      ui.oldHeader.find('.button_outer').removeClass('pressed');
    },
    create: (e, ui) => {
      ui.header.find('.button_outer').addClass('pressed');
    }
  });
});

.button_outer {
  color: #ecf0f1;
  background: #e74c3c;
  width: 40px;
  height: 40px;
  border: 0;
  font-size: 1.5em;
  position: relative;
  border-radius: 2rem;
}

.button_outer .minus {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

.button_outer .minus:first-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

.button_outer .minus:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
  transform: rotate(90deg);
}

.pressed .minus {
  transform: rotate(180deg);
}

.pressed .minus:last-child {
  left: 50%;
  right: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<div id="accordion">
  <div >
    <p>ACCORDION BUTTON 1</p>
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <p>ANSWER 1</p>
    </div>
  </div>
  <div >
    <p>ACCORDION BUTTON 2</p>
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <p>ANSWER 2</p>
    </div>
  </div>
</div>

Also note that you don't need multiple document.ready event handlers - all the logic in the page can be added in to a single one.