Question

0

217

Views

Toggle class for one element when accordion is pressed

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 class="qa_accordion_button">
    <p>ACCORDION BUTTON 1</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 1</p>
    </div>
  </div>
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 2</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 2</p>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T14:52:33.652Z

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 class="qa_accordion_button">
    <p>ACCORDION BUTTON 1</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 1</p>
    </div>
  </div>
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 2</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <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.

0

217

Toggle class for one element when accordion is pressed

1 answers

0

Find remote jobs

Andres GPT