Schließen Sie alle anderen Akkordeons, wenn man geöffnet wird

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Schließen Sie alle anderen Akkordeons, wenn man geöffnet wird

by Anonymous » 12 Apr 2025, 03:41

Ich habe den Code unten, der Akkordeons öffnet und schließt, ich brauche Hilfe, wenn ich einen öffne, der Rest ist geschlossen. Mein Problem mit diesem Code ist, dass ich das aktuelle geöffnete Akkordeon nicht schließen kann. Wenn Sie auf das gleiche Akkordeon klicken, wird er geöffnet, aber wenn Sie versuchen, erneut zu klicken. class = "snippet-code-js Lang-js hübschesPrint-override">

Code: Select all

const accordionEl = document.querySelector('.main')
const panelEls    = accordionEl.querySelectorAll('.panel')

accordionEl.addEventListener('click', ({ target }) => {
if (target.classList.contains('accordion')) {
panelEls.forEach(panelEl => {
panelEl.classList.remove('open')
})

const { nextElementSibling } = target
nextElementSibling.classList.add('open')
}
})< /code>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: White;
font-family: Sakkal Majalla;
direction: rtl;
position: relative;
z-index: -2;
-ms-overflow-style: none;

}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
display: none;
}

/* Chrome */

li {
list-style: none;
}

a {
text-decoration: none;
}

.main {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
margin-top: 2rem;
margin-bottom: 1rem;
}

table {
border: 1px solid #dededf;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 1px;
text-align: center;
}

th {
border: 1px solid #dededf;
background-color: #eceff1;
color: #000000;
padding: 5px;
}

td {
border: 1px solid #dededf;
background-color: #ffffff;
color: #000000;
padding: 5px;
}

th:nth-child(1) {
width: 30.9rem;
}

th:nth-child(2) {
width: 10rem;
}

th:nth-child(3) {
width: 7rem;
}

.accordion {
background-color: #ffffff;
color: black;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
padding: 18px;
border: none;
text-align: right;
outline: none;
font-size: 20px;
transition: 0.4s;
width: 50rem;
border: 1px solid rgb(219, 219, 219);
border-radius: 8px;
box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
}

.active,
.accordion:hover {
border-radius: 8px 8px 0px 0px;
border-color: rgb(0, 128, 255);
}

.accordion span {
float: left;
font-size: 15px;
color: #116ce4;
}

/* OLD CODE USE BELOW IT
.panel {
display: none;
overflow: hidden;
}
*/
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
padding: 0px;
}

.panel.open {
max-height: 1000px;
padding: 18px;
}< /code>

 John Doe 


company
department
2025?

COMPANY A
FINANCE
&#9989;


COMPANY Z
PMO
&#10060;



 John Doe 


company
department
2025?

company A
HR
&#10060;


company B
HR
&#10060;


company C
HR
&#10060;



  John Doe 


company
department
2025?

company A
HR
&#9989;

Top