My projects include some bootstrap accordion. I use collapse and show to allow the user to close each accordion by themselves. But now, when I close one of the accordions and reopen it, the others close in on it.
I added the bootstrap collapse and show classes so that the user can manually close each accordion. Initially, the entire accordion will remain open. I anticipate that all of the accordions will be turned on and off manually by the user. If I close or turn off any of the accordions manually, I don’t want any other accordions to have any interaction (on/off). So if I turn off or open one accordion, the others should remain the same.
My code –
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap’);
.new-listing-head h1 {
color: #000;
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.listing-head-dropdown .dropdown-one .btn {
padding: var(--25, 10px) var(--6, 24px);
border-radius: var(--rounded-full, 1000px);
border: 1px solid var(--primary-700, #1A56DB);
background-color: transparent;
color: #1A56DB;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
.listing-head-dropdown .dropdown-one:nth-child(2) {
margin-left: 16px;
}
.dropdown-one .dropdown-toggle::after {
display: none;
}
.listing-head-dropdown .btn {
padding: var(--25, 10px) var(--6, 24px);
border-radius: var(--rounded-full, 1000px);
background: var(--primary-600, #1C64F2);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
.listing-head-dropdown .btn:nth-child(3) {
margin-left: 16px;
}
.new-listing-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.listing-head-dropdown {
display: flex;
align-items: center;
}
.listing-accordion {
margin-top: 32px;
}
.listing-accordion .accordion-button:not(.collapsed)::before {
transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button:not(.collapsed) {
background-color: transparent;
border: none;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
}
.listing-accordion .accordion-item {
border: 0;
}
.listing-accordion .accordion-item .accordion-header {
display: inline-block;
}
.listing-accordion .accordion-item .accordion-header .accordion-button {
align-items: center;
cursor: pointer;
padding: 0;
}
.listing-accordion .accordion-item .accordion-header .accordion-button .listing-accord-head span:first-child {
color: #000;
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
display: block;
}
.listing-accordion .accordion-item .accordion-header .accordion-button .listing-accord-head span:last-child {
color: #6B7280;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.listing-accordion .accordion-item .accordion-body {
border-radius: var(--rounded-2xl, 16px);
border: 1px solid var(--gray-200, #E5E7EB);
background: var(--white, #FFF);
margin-top: 16px;
}
.listing-search .form-control {
border-radius: var(--rounded-lg, 8px);
border: 1px solid var(--gray-300, #D1D5DB);
background: var(--gray-50, #F9FAFB);
border-left: 0;
padding-left: 0;
}
.listing-search .form-control::placeholder {
color: var(--gray-500, var(--gray-500, #6B7280));
}
.listing-search {
display: flex;
align-items: center;
}
.listing-search .btn {
border-radius: var(--rounded-lg, 8px);
border: 1px solid var(--primary-600, #1C64F2);
background: var(--primary-700, #1A56DB);
color: #fff;
white-space: nowrap;
margin-left: 12px;
}
.listing-search .form-control:focus {
box-shadow: none;
border-color: #D1D5DB;
}
.listing-search .input-group-text {
background: var(--gray-50, #F9FAFB);
border: 1px solid var(--gray-300, #D1D5DB);
border-radius: var(--rounded-lg, 8px);
border-right: 0;
border-top-right-radius: 0;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-right-radius: 0;
padding-left: 14px;
}
.title-listing label {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
color: var(--gray-900, var(--gray-900, #111928));
margin-top: 18px;
}
.title-listing .form-control {
border-radius: 8px;
border: 1px solid var(--gray-300, #D1D5DB);
background: var(--gray-50, #F9FAFB);
padding: var(--3, 10px) var(--4, 16px);
margin-top: 6px;
}
.title-listing .form-control:focus {
box-shadow: none;
}
.description-listing {
border-radius: 8px;
margin-top: 20px;
}
.description-listing-btntwo .form-control {
border: 0;
width: 100%;
}
.description-listing-btntwo .form-control:focus {
box-shadow: 0 !important;
}
.nicEdit-panelContain {
padding: var(--3, 7px) var(--4, 16px);
padding-bottom: 10px;
border-radius: 8px 8px 0px 0px;
background: var(--gray-50, #F9FAFB);
}
.description-listing .form-control {
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
/* select and label */
.listingdrop-select label {
color: var(--gray-900, var(--gray-900, #111928));
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
margin-top: 16px;
margin-bottom: 8px;
}
.listingdrop-select select {
max-width: 348px;
width: 100%;
padding: var(--3, 12px);
background-color: var(--gray-50, #F9FAFB);
color: var(--gray-500, var(--gray-500, #6B7280));
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 125%;
}
.listingdrop-select select:focus {
box-shadow: none;
border-color: #D1D5DB;
}
.listingdrop-description-select {
display: flex;
align-items: center;
}
.listingdrop-description-select .btn {
padding: var(--3, 6px) var(--6, 24px);
padding-bottom: 10px;
border-radius: var(--rounded-lg, 8px);
border: 1px solid var(--primary-700, #1A56DB);
margin-left: 16px;
}
.nicEditors {
width: 100%;
}
</style>
<div class="listing-accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header">
<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div style="display: block; margin-left: 16px;" class="listing-accord-head">
<span>General Settings</span>
<span>analysis of order trends in one year</span>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<!-- Listing Search -->
<div class="listing-search">
<div class="input-group acounts-adress-input">
<div class="input-group-prepend">
<span class="input-group-text adress-input-icon">
hi
</span>
</div>
<input type="search" class="form-control" placeholder="Tell us about your product. Enter a keyword, UPC, or ISBN to search">
</div>
<button class="btn"> Search</button>
</div>
<!-- Title Listing -->
<div class="title-listing">
<label for="title">Tittle</label>
<input type="text" class="form-control" placeholder="Bonnie">
</div>
<!-- Description Listing -->
<div class="description-listing">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
</div>
<!-- Description Select -->
<div class="listingdrop-select">
<label for="foldersave">Save to folder</label>
<div class="listingdrop-description-select">
<select class="form-select" aria-label="Default select example">
<option selected>Save to Folder</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn"><i class="fab fa-hippo"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Images -->
<div class="accordion-item images-analysis">
<div class="accordion-header">
<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
<div style="display: block; margin-left: 16px;" class="listing-accord-head">
<span>Images</span>
<span>analysis of order trends in one year</span>
</div>
</div>
</div>
<div id="collapsetwo" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="image-accordion-main">
<div class="images-analysis-content">
<img src="./image/image-a-one.png" alt="Listing Images">
<div class="images-analysis-btn">
<button class="btn">
hi
</button>
<button class="btn">
hi
</button>
</div>
</div>
<div class="images-analysis-content">
<img src="./image/image-a-teo.png" alt="Listing Images">
<div class="images-analysis-btn">
<button class="btn">
hi
</button>
<button class="btn">
hi
</button>
</div>
</div>
<div class="images-analysis-content">
<img src="./image/image-a-three.png" alt="Listing Images">
<div class="images-analysis-btn">
<button class="btn">
hi
</button>
<button class="btn">
hi
</button>
</div>
</div>
<div class="images-analysis-content">
<img src="./image/image-a-four.png" alt="Listing Images">
<div class="images-analysis-btn">
<button class="btn">
hi
</button>
<button class="btn">
hi
</button>
</div>
</div>
<div class="images-analysis-content">
<img src="./image/image-a-five.png" alt="Listing Images">
<div class="images-analysis-btn">
<button class="btn">
hi
</button>
<button class="btn">
hi
</button>
</div>
</div>
<!-- Add New Image -->
<div class="newimage-analysis">
<img src="./image/addnew-image.png" alt="">
<div class="newimage-analysis-content">
<h5>Add New Image</h5>
<span>Max. File Size: 15 MB
(jpg, png, heic)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="//js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
<script>
// Disable the toggling behavior of Bootstrap accordion
document.querySelectorAll('.accordion-button').forEach(button => {
button.addEventListener('click', function (e) {
e.stopPropagation();
});
});
</script>