LiemLT
Reputation: 103
Fixing this accordion element
I have the following CodePen:
https://codepen.io/LiemLT/pen/zYojvGb
When I click a header button, it will show the card-body and the :after element will change from "down" to "up". When I click that same header button again, the card-body will be collapsed and the :after element will change from "up" to "down".
Here's the problem:
After I click a header button to show the content of card-body, rather than clicking the same header button again, I click the header button of a sibling element, the card-body of the first card is closed, but the :after element of that header button is still "up". I need to fix this.
Sorry if my explanation feels vague, English isn't my native language.
var acc = document.getElementsByClassName("btn-block");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
});
}.qa {
background-color:#f7f7f7;
}
.qa .card {
margin-bottom: 1rem;
}
.qa .card-header {
background-color: #fff;
}
.qa .btn:focus {
box-shadow: none;
}
.qa .card-header .btn::after {
content: '\f078';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}
.qa .card-header .btn.active::after {
content: '\f077';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<!-- Bootstrap 4.6 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<!-- FancyBox CSS -->
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<!-- Start Selling CSS -->
<link rel="stylesheet" href="./css/start_selling.css">
<title>Start Selling on Fiverr</title>
</head>
<body>
<section class="qa">
<div class="container py-5">
<h2 class="text-center mb-5">Q&A</h2>
<div class="row">
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionL">
<div class="card">
<div class="card-header" id="heading1">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
What can I sell?
</button>
</h2>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionL">
<div class="card-body">
Be creative! You can offer any service you wish as long as it's legal and complies
with our terms. There are over 200 categories you can browse to get ideas.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
aria-controls="collapse2">
How much money can I make?
</button>
</h2>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionL">
<div class="card-body">
It's totally up to you. You can work as much as you want. Many sellers work on
Fiverr full time and some keep their 9-5 job while using Fiverr to make extra money.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse3" aria-expanded="false"
aria-controls="collapse3">
How much does it cost
</button>
</h2>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionL">
<div class="card-body">
It's free to join Fiverr. There is no subscription required or fees to list your
services. You keep 80% of each transaction.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionR">
<div class="card">
<div class="card-header" id="heading4">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse4" aria-expanded="true" aria-controls="collapse4">
How much time will I need to invest?
</button>
</h2>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionR">
<div class="card-body">
It's very flexible. You need to put in some time and effort in the beginning to
learn the marketplace and then you can decide for yourself what amount of work you
want to do.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse5" aria-expanded="false"
aria-controls="collapse5">
How do I price my service?
</button>
</h2>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionR">
<div class="card-body">
With Gig Packages, you set your pricing anywhere from $5 - $995 and offer three
versions of your service at three different prices.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse6" aria-expanded="false"
aria-controls="collapse6">
How do I get paid?
</button>
</h2>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordionR">
<div class="card-body">
Once you complete a buyer's order, the money is transferred to your account. No need
to chase clients for payments and wait 60 or 90 days for a check.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/jquery.fancybox.js"></script>
<script src="./js/start_selling.js"></script>
</body>Upvotes: 0
Views: 67
Answers (1)
Fabrizio Calderan
Reputation: 123377
Before toggling the active class you should remove it for the element already expanded (if any)
var acc = document.getElementsByClassName("btn-block");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
// look for any expanded accordion
var alreadyExpanded = document.querySelector('.btn-block.active');
// does it exist and it's not the current selected?
if (!!alreadyExpanded && alreadyExpanded != this) {
// well, let's collapse it.
alreadyExpanded.classList.remove('active');
}
this.classList.toggle("active");
});
}.qa {
background-color:#f7f7f7;
}
.qa .card {
margin-bottom: 1rem;
}
.qa .card-header {
background-color: #fff;
}
.qa .btn:focus {
box-shadow: none;
}
.qa .card-header .btn::after {
content: '\f078';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}
.qa .card-header .btn.active::after {
content: '\f077';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<!-- Bootstrap 4.6 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<!-- FancyBox CSS -->
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<!-- Start Selling CSS -->
<link rel="stylesheet" href="./css/start_selling.css">
<title>Start Selling on Fiverr</title>
</head>
<body>
<section class="qa">
<div class="container py-5">
<h2 class="text-center mb-5">Q&A</h2>
<div class="row">
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionL">
<div class="card">
<div class="card-header" id="heading1">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
What can I sell?
</button>
</h2>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionL">
<div class="card-body">
Be creative! You can offer any service you wish as long as it's legal and complies
with our terms. There are over 200 categories you can browse to get ideas.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
aria-controls="collapse2">
How much money can I make?
</button>
</h2>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionL">
<div class="card-body">
It's totally up to you. You can work as much as you want. Many sellers work on
Fiverr full time and some keep their 9-5 job while using Fiverr to make extra money.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse3" aria-expanded="false"
aria-controls="collapse3">
How much does it cost
</button>
</h2>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionL">
<div class="card-body">
It's free to join Fiverr. There is no subscription required or fees to list your
services. You keep 80% of each transaction.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionR">
<div class="card">
<div class="card-header" id="heading4">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse4" aria-expanded="true" aria-controls="collapse4">
How much time will I need to invest?
</button>
</h2>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionR">
<div class="card-body">
It's very flexible. You need to put in some time and effort in the beginning to
learn the marketplace and then you can decide for yourself what amount of work you
want to do.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse5" aria-expanded="false"
aria-controls="collapse5">
How do I price my service?
</button>
</h2>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionR">
<div class="card-body">
With Gig Packages, you set your pricing anywhere from $5 - $995 and offer three
versions of your service at three different prices.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse6" aria-expanded="false"
aria-controls="collapse6">
How do I get paid?
</button>
</h2>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordionR">
<div class="card-body">
Once you complete a buyer's order, the money is transferred to your account. No need
to chase clients for payments and wait 60 or 90 days for a check.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/jquery.fancybox.js"></script>
<script src="./js/start_selling.js"></script>
</body>Upvotes: 1
Related Questions
- bootstrap accordion collapsing issue
- Bootstrap accordion behaving weird
- Bootstrap customizing accordion
- Bootstrap Accordion not working well
- BootStrap Accordion Panel
- Bootstrap Accordion issue
- Bootstrap accordion
- bootstrap accordion is not working properly
- bootstrap accordion not working properly
- twitter bootstrap accordion