CSS HTML Accordion question

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

Answer 1

Your code attempt

Answer 2

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;

}

Answer 3

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.

Answer 4

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

Answer 5

https://t.me/Coders_Crafters join our Teligram group for discussion about codes questions and many more