JavaScript Umschalt der CSS -Eigenschaft, um ein Element klebrig/nicht klebrig zu machen ⇐ CSS

[Anonymous]

Ich habe einen JS -Code erstellt, um ein "Akkordeon" zu öffnen und zu schließen, obwohl ich eine Umschaltungsoption haben möchte, um das Akkordeon klebrig /nicht klebrig (normal) zu machen. Das CSS -Snippet unten macht das aktive Akkordeon klebrig, wenn der Benutzer auf Seite untergeht: < /p>

Code: Select all

.accordion.active {
position: sticky;
top: 2%;
}
< /code>
Ich möchte einen Umschalter haben, um zu wechseln, wenn die Benutzer wollen, dass das Akkordeon klebrig ist oder nicht.  Voller Code unten eingefügt, bitte helfen Sie.            // the code snippet below allows for one accordion to be opened and closes the rest
const accordionEls = document.querySelectorAll('.accordion')
const panelEls = document.querySelectorAll('.panel')

accordionEls.forEach((acc) => {
acc.addEventListener('click', ({ target }) => {
target.classList.toggle('active')
accordionEls.forEach(accordionEl => {
if (accordionEl !== target) {
accordionEl.classList.remove('active')
}
})
const { nextElementSibling } = target
panelEls.forEach(panelEl => {
if (panelEl !== nextElementSibling) {
panelEl.classList.remove('open')
} else {
panelEl.classList.toggle('open')
}
})
})
})< /code>
        body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: White;
font-family: Sakkal Majalla;
direction: rtl;
position: relative;
text-align: center;
}

button{
margin-top: 4rem;

}

.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-color:  rgb(0, 128, 255);
}

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

/* this code makes the accordion become sticky if it's clicked "becomes active" */
.accordion.active {
position: sticky;
top: 2%;
}

.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>
        TOGGLE STICKY ACCORDION / NOT STICKY ACCORDION

John Doe7companydepartment? companyHR&#9989; companyHR&#9989;  companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989; companyHR&#9989;companyHR&#9989;companyHR&#10060; companyHR&#10060; companyHR&#10060; companyHR&#10060;Smith Taylor5companydepartment? companyHR&#9989; companyHR&#10060; companyHR&#10060; companyHR&#10060;  companyHR&#10060;