CSS HTML Accordion question | Sololearn: Learn to code for FREE!

0

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>?

4/18/2021 2:28:17 PM

Sal

4 Answers

New Answer

0

Your code attempt

0

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; }

0

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.

0

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....