'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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
