CSS HTML Accordion question | Sololearn: Learn to code for FREE!
¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita

CSS HTML Accordion question

I'm making an accordion with <details> and <summary> but have a <div> as my summary. All works and appears well aside from a hidden bar above the div where the arrow or + would sit if it wasn't a div. This creates white space between multiple <summary> 's that I don't want to be there! How do I remove that white space and shift the <div> to the very top of the <summary>?

18th Apr 2021, 2:28 PM
5 Respuestas
Your code attempt
18th Apr 2021, 3:48 PM
Matias - avatar
So it's the "colheader" div that ends up as the drop down button but there is a gap that appears - it's clickable and works as if you are hovering over the div as well. I'm new to this - the CSS I copied from wherever I found it and don't really understand it - I played around a bit to try get the space to disappear but no luck so far. <div class="row"> <div class="col"> <details> <summary><div class="colheader">Chronological Understanding</div></summary> <div class="colbox"><h4>Header 1</h4> <ul> <li>text</li><br> <li>text</li><br> </ul> </div> </details> </div> <div class="col"> <details> <summary><div class="colheader">Chronological Understanding</div></summary> <div class="colbox"><h4>Header 1</h4> <ul> <li>text</li><br> <li>text</li><br> </ul> </div> </details> </div> </div> and for CSS: details > summary { border: none; cursor: pointer; } summary:focus { outline: 0; } details[open] summary:after { display:none; }
18th Apr 2021, 4:11 PM
Remove the "colheader" div from your code. That should fix the prob i think you're facing , and keep the arrow summary heading on the same line.
20th Apr 2021, 7:22 AM
InfiniteLoop - avatar
But the colheader div is styled how I want it. I did think it might come down to removing the div but I was really hoping there was another way! It's a shame it can't be done with a div....
20th Apr 2021, 4:47 PM
https://t.me/Coders_Crafters join our Teligram group for discussion about codes questions and many more
13th Oct 2023, 4:03 AM
Alison Pinto
Alison Pinto - avatar