cant move ul.width to width:0px - css

Question

I have the following code:
<div class="filter">
<ul>
<span class="filter-icon text-gray-lightest"> <!-- svg-inline--fa -->
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>
</span>
<li data-filter="f0">Alle</li>
<li data-filter="f1">Verw/Fin</li>
<li data-filter="f2">MaPa</li>
<li data-filter="f3">Presse</li>
<li data-filter="f4">Programme</li>
<li data-filter="f5">Inland</li>
<li data-filter="f6">Controlling</li>
</ul>
</div>
with this css:
.filter {
margin: 1px 0 1px 0;
width: 40%;
background-color:red;
overflow:hidden;
}
.filter ul {
padding-left:8px;
}
.filter-icon {
display: inline-block;
fill: currentColor;
stroke: currentColor;
vertical-align: middle;
transition: transform .5s;
height:16px; width:16px;
}
.filter-icon:hover {
fill: var(--orange);
stroke: #000;
transform:rotate(180deg);
}
.filter ul li {
display:inline-block;
padding:15px;
position:relative;
}
.filter:hover {
width:50px;
}
I would like to change the width of the div.filter with javascript to 0px.
for better test i made here a filter:hover to 50px.
Please see codepen
My Problem is, that the filter-box gets higher. But I would like that the content of the filter-box disapear (by overflow:hidden).
How to achieve this?

Answer 1

let filter = document.getElementsByClassName("filter")[0];
filter.addEventListener("mouseover", function(){filter.style.display = "none"});
filter.addEventListener("mouseout", function(){filter.style.display = "block"});