当我单击一个时，所有可折叠项都会打开

Question

I am currently trying to make a tribute page with collapsible content. My problem is that when you click on the first collapsible, the rest of them open. I would like for a collapsible to only open when it is clicked. They are 9 in total and it makes no sense for all of them to open when user clicks just one.

 body { margin: 0px 0px 0px 0px; } header { width: 100%; height: 100px; background-color: silver; text-align: center; } #main { background-color: silver; width: 100%; margin: auto; } body { padding: 10px; } #img-div { width: 60%; margin: auto; display: flex; justify-content: center; height: 400px; background-color: white; flex-direction: column; text-align: center } #tribute-info { width: 100%; height: 300px; background-color: white; } body { font-family: "Roboto"; font-size: 15px; padding: 20px; }.collapse-list { margin-bottom: 0; padding-left: 0; list-style: none; border-bottom: 1px solid #e0e0e0; }.collapse-open { display: none; }.collapse-panel { visibility: hidden; max-height: 0; opacity: 0; transition: max-height.1s, visibility.3s, opacity.3s; }.collapse-open:checked~.collapse-panel { max-height: 100%; opacity: 100; visibility: visible }.collapse-list li { margin-bottom: 0; }.collapse-list.collapse-btn { border-top: 1px solid #e0e0e0; cursor: pointer; display: block; padding: 15px 10px; margin-bottom: 0; color: #4285f4; font-weight: normal; transition: background-color.2s ease; }.collapse-list.collapse-btn:hover { background: #eee; }.collapse-open~.collapse-btn:before { content: "↓"; float: right; }.collapse-open:checked~.collapse-btn:before { content: "↑"; }.collapse-list.collapse-inner { padding: 10px }

 <header> <h1>Remembering Dr. Stella Ameyo Adadevoh</h1> <h4>The Woman Who Saved Nigeria From Ebola</h4> </header> <main id="main"> <div id="img-div"> <img id="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh"> <h5>Dr. Stella Ameyo Adadevoh</h5> </div> </main> <section> <div class="collapse-list" id="tribute-info"> <input class="collapse-open" type="checkbox" id="collapse-1"> <label class="collapse-btn" for="collapse-1">Early Life And Family</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p> </div> </div> <input class="collapse-open" type="checkbox" id="collapse-2"> <label class="collapse-btn" for="collapse-2">Education</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p> </div> </div> <input class="collapse-open" type="checkbox" id="collapse-3"> <label class="collapse-btn" for="collapse-3">Medical Education And Career</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>Dr. Adadevoh graduated from the University of Lagos, </p> </div> </div> </div> </section>

Answer 1

This is the culprit clause: .collapse-open:checked ~.collapse-panel - all successor sibling elements of class collapse-panel open when a checkbox is checked.

The remedy is a move to the adjacent sibling selector + modifying the selector that opens the panel on the way:

/* old */ .collapse-open:checked ~ .collapse-panel
/* new */ .collapse-open:checked + label + .collapse-panel

The selectors controlling the display of the arrow have been altered to use the adjacent sibling selector as well.

 body { margin: 0px 0px 0px 0px; } header { width: 100%; height: 100px; background-color: silver; text-align: center; } #main { background-color: silver; width: 100%; margin: auto; } body { padding: 10px; } #img-div { width: 60%; margin: auto; display: flex; justify-content: center; height: 400px; background-color: white; flex-direction: column; text-align: center } #tribute-info { width: 100%; height: 300px; background-color: white; } body { font-family: "Roboto"; font-size: 15px; padding: 20px; }.collapse-list { margin-bottom: 0; padding-left: 0; list-style: none; border-bottom: 1px solid #e0e0e0; }.collapse-open { display: none; }.collapse-panel { visibility: hidden; max-height: 0; opacity: 0; transition: max-height.1s, visibility.3s, opacity.3s; }.collapse-open:checked + label +.collapse-panel { max-height: 100%; opacity: 100; visibility: visible }.collapse-list li { margin-bottom: 0; }.collapse-list.collapse-btn { border-top: 1px solid #e0e0e0; cursor: pointer; display: block; padding: 15px 10px; margin-bottom: 0; color: #4285f4; font-weight: normal; transition: background-color.2s ease; }.collapse-list.collapse-btn:hover { background: #eee; }.collapse-open +.collapse-btn:before { content: "↓"; float: right; }.collapse-open:checked +.collapse-btn:before { content: "↑"; }.collapse-list.collapse-inner { padding: 10px }

 <html> <body> <header> <h1>Remembering Dr. Stella Ameyo Adadevoh</h1> <h4>The Woman Who Saved Nigeria From Ebola</h4> </header> <main id ="main"> <div id="img-div"> <img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh"> <h5>Dr. Stella Ameyo Adadevoh</h5> </div> </main> <section> <div class="collapse-list" id="tribute-info"> <input class="collapse-open" type="checkbox" id="collapse-1"> <label class="collapse-btn" for="collapse-1">Early Life And Family</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p> </div> </div> <input class="collapse-open" type="checkbox" id="collapse-2"> <label class="collapse-btn" for="collapse-2">Education</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p> </div> </div> <input class="collapse-open" type="checkbox" id="collapse-3"> <label class="collapse-btn" for="collapse-3">Medical Education And Career</label> <div class="collapse-panel"> <div class="collapse-inner"> <p>Dr. Adadevoh graduated from the University of Lagos, </p> </div> </div> </div> </section> </body> </html>