Border of multiple details tags in one html row are not working responsive

Question

I have a problem on my website: https://www.ars-neurochirurgica.com/ . I have several accordion menus which I made with pure css without any javascript and everything works perfect, except for one problem:

When I click on the categories to expand the tag, all other boxes which are collapsed with the detail tag which are on the same row will expand their border from the .div. Is there any way to fix this problem without using javascript? I tried to only draw the border if the details tag is open, however then I run into the problem that the border is smaller than the .div because it will be only assigned to the details tag. The best way would be to be able to select the parent element from the details[open] tag. However after doing some research that is not possible with css3 only. Anyone has ideas how to fix this problem? On mobile it works perfectly fine because only one row is displayed....

Answer 1

Here's a quick solution that just addresses the border issue you described:

1. Remove the border, padding-left, and padding-right from .compactblock.

2. Add the following CSS:

   details {
       padding-left: 10px;
       padding-right: 10px;
   }
   
   details[open] {
       border: 1px solid var(--darkblack);
       height: 100%;
   }
   

Basically, this forces the <details> element to expand to fill the full height, so that its border surrounds the entire content of the expanded accordion block. It also moves the padding from the <div> container to the <details> element itself so that the width of the border matches the summary region.

However, since this approach still uses the grid layout, you'll notice that elements still "jump" below "phantom" blocks when you expand a block in any row. To resolve this, I would highly recommend taking a look at using flexbox instead, per the recommendation in the comments.