I'm using a details element as an accordion to host a filter menu. And I want that element to have the same width closed as it is open.
This is my filter menu code:
<div class="filter-accordian">
<details>
<summary>Filter</summary>
<div class="filter-wrap">
<div class="filter-group">
<div class="label">Sted</div>
<div class="filter-section">
<div>
<button role="button" class="filter">Oslo</button>
</div>
<div>
<button role="button" class="filter">Bergen</button>
</div>
<div>
<button role="button" class="filter">Stavanger</button>
</div>
<div>
<button role="button" class="filter">Trondheim</button>
</div>
<div>
<button role="button" class="filter">Sandnes</button>
</div>
</div>
</div>
<div class="filter-group">
<div class="label">Merke</div>
<div class="filter-section">
<div>
<button role="button" class="filter">Seat</button></div>
<div>
<button role="button" class="filter">Renault</button>
</div>
<div>
<button role="button" class="filter">Toyota</button>
</div>
<div>
<button role="button" class="filter">Nissan</button>
</div>
<div>
<button role="button" class="filter">Hyundai</button>
</div>
<div>
<button role="button" class="filter">Honda</button>
</div>
<div>
<button role="button" class="filter">Skoda</button>
</div>
<div>
<button role="button" class="filter">Volvo</button>
</div>
<div>
<button role="button" class="filter">Land rover</button>
</div>
</div>
</div>
<div class="filter-group">
<div class="label">Type</div>
<div class="filter-section">
<div>
<button role="button" class="filter">Elektrisk</button>
</div>
<div>
<button role="button" class="filter">Hydrogen</button>
</div>
<div>
<button role="button" class="filter">Diesel</button>
</div>
<div>
<button role="button" class="filter">Hybrid</button>
</div>
</div>
</div>
<div class="filter-group">
<div class="label">Side</div>
<div class="filter-section">
<div>
<button role="button" class="filter">Flexidrive</button>
</div>
<div>
<button role="button" class="filter">Swap</button>
</div>
<div>
<button role="button" class="filter">Kinto</button>
</div>
<div>
<button role="button" class="filter">Imove</button>
</div>
<div>
<button role="button" class="filter">Volvo</button>
</div>
</div>
</div>
</div>
</details>
</div>
The problem im facing is that the filter menu is around 700px wide while open, depending on screen size. but while closed it's only 70px wide
my css:
summary {
align-self: flex-start;
}
.filter-wrap {
display: flex;
margin-top: 1rem;
}
.filter-accordian {
margin: auto;
display: flex;
padding: 1rem;
width: fit-content;
background: gray;
color: white;
margin-top: 1rem;
box-shadow: 2px 2px 3px #000;
border-radius: 2px;
}
.filter-group{
display: flex;
flex-direction: column;
margin-right: 3px;
box-shadow: 1px 2px 3px #000;
padding-bottom: 5px;
padding-right: 5px;
}
.filter-section {
display: grid;
grid-template-rows: repeat(3, 2.2rem);
grid-auto-flow: column;
}
.label {
background: black;
padding-left: 5px;
border-radius: 2px 2px 1px 1px;
width: 100%;
overflow: hidden;}