Menu
Currently, I'm working on replacing the jQuery slideToggle() function with vanilla JavaScript and trying to find a generally effective solution. My elements can have various padding, and until now, this padding attribute was animated smoothly as well.
My solution works so far, but I can't dynamically retrieve the padding attribute of my element. When the menu is closed, the padding should be 0, and when it's opened, the padding should be inherited dynamically from the CSS class passed via TailwindCSS. However, I can't find a way to retrieve this CSS property.
Here’s what I’ve tried so far:
Additionally, my element can be opened and closed initially, so it’s not always an open menu when the user interacts.
Any suggestions would be greatly appreciated; at this point, I’m totally stuck.
Currently the only working solution is to hardcode the padding in js
const categoriesTitle = document.querySelector(".categories_title");
categoriesTitle.addEventListener("click", function () {
let menu = document.querySelector(".toggle_categories_menu");
let menuDisplay = window.getComputedStyle(menu).display;
if (menuDisplay === 'block') {
menu.style.height = `${menu.scrollHeight}px`;
setTimeout(function () {
menu.style.height = '0px';
menu.style.paddingTop = '0px';
menu.style.paddingBottom = '0px';
}, 10);
menu.addEventListener('transitionend', function () {
menu.style.display = 'none';
}, {once: true});
} else {
menu.style.display = 'block';
console.log(window.getComputedStyle(menu).padding);
menu.style.height = '0px';
menu.style.paddingTop = '0px';
menu.style.paddingBottom = '0px';
menu.offsetHeight;
setTimeout(function () {
menu.style.height = `${menu.scrollHeight + 40 + 9}px`;
menu.style.paddingTop = '40px';
menu.style.paddingBottom = '9px';
}, 10);
menu.addEventListener('transitionend', function () {
menu.style.height = 'auto';
}, {once: true});
}
}); <script src="https://cdn.tailwindcss.com"></script>
<div class="col-span-12 lg:col-span-3 lg:pr-3">
<div class="categories_menu mb-[30px] lg:mb-0 relative">
<div class="categories_title px-4 h-12 leading-9 lg:h-14 lg:leading-10 relative cursor-pointer bg-red-600 flex justify-between items-center">
<div class="flex justify-center items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" class="w-6 h-6 inline-block">
<path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"></path>
</svg>
<p class="text-xl font-semibold tracking-tighter cursor-pointer text-white mb-0 inline-block font-sans">Title</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" class="w-6 h-6 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="toggle_categories_menu hidden md:block max-h-[360px] md:max-h-none overflow-hidden py-[15px] pr-[10px] pl-[20px] md:px-0 md:pt-[90px] md:pb-[9px] border-x border-b border-solid border-[#ddd] absolute w-full top-full z-10 bg-[#fff] transition-height ease-in-out duration-1000">
<ul>
<li class="menu_item_children" data-product="745">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="alfa-romeo">
List item 1
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="32">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="audi">
List item 2
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="1598">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="baic">
List item 3
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="501">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="bmw">
List item 4
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="37">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="chevrolet">
List item 5 <i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="45">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="citroen">
List item 6
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="1451">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="cupra">
List item 7
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="490">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="dacia">
List item 8
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="345">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="daewoo">
List item 9
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li class="menu_item_children" data-product="942">
<div class="flex justify-between hover:bg-[#F0F0F0] group">
<a class="leading-9 pr-[15px] pl-[20px] text-sm text-[#333] capitalize font-normal block cursor-pointer group-hover:font-bold font-spinnaker" href="daihatsu" >
List item 10
<i class="fa fa-angle-right float-right !text-sm !leading-9"></i>
</a>
<div class="dropdown_button pr-[15px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</li>
<li id="loadMoreCategories" class="pr-[15px] pl-[20px] leading-9 text-sm text-[#333] capitalize font-normal block cursor-pointer hover:bg-[#F0F0F0] hover:font-bold font-spinnaker">
<a id="more-btn">
<i class="fa fa-plus" aria-hidden="true"></i>
Mai multe >>>
</a>
</li>
</ul>
</div>
</div>
</div>
691
asked Jan 19 '26 08:01
For that task you might consider using CSS to toggle an element height from 0 to auto, and just a bit of JavaScript with Event delegation in order to toggle a class:
const detailsToggle = (ev) => {
const elSummary = ev.target.closest(".details-summary");
if (elSummary) elSummary.closest(".details").classList.toggle("open");
};
addEventListener("click", detailsToggle);* {
margin: 0;
box-sizing: border-box;
}
:root {
--accent: #dc2626;
}
body {
font: 1rem/1.4 system-ui;
color: #333;
}
/* ICONS */
[class^="ico-"],
[class*=" ico-"] {
content: "";
display: inline-flex;
width: 1em;
height: 1em;
background: none 50% / 100% no-repeat;
&.ico-menu {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' %3E%3Cpath fill-rule='evenodd' d='M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}
&.ico-down {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' %3E%3Cpath fill-rule='evenodd' d='M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}
}
/* DROPDOWN DETAILS */
.details {
interpolate-size: allow-keywords;
.details-summary {
cursor: pointer;
}
.details-content {
transition: block-size 1s, content-visibility 1s allow-discrete;
overflow: hidden;
block-size: 0;
/* Or also: height:0; */
}
&.open .details-content {
block-size: auto;
/* Or also: height:auto; */
}
}
/* CUSTOM STYLES HERE */
.menu {
.details-summary {
background: var(--accent);
color: #fff;
padding: 1em;
display: flex;
align-items: center;
gap: 1em;
.ico-down {
margin-left: auto;
mix-blend-mode: dark;
}
}
.details-content {
box-shadow: inset 0 0 0 1px #ddd;
}
}
.list {
list-style: none;
padding: 1.5em 1em;
a {
color: currentColor;
text-decoration: none;
}
}<div class="details menu">
<div class="details-summary"><i class="ico-menu"></i>Title <i class="ico-down"></i></div>
<div class="details-content">
<ul class="list">
<li><a href="#!">List item 1</a></li>
<li><a href="#!">List item 2</a></li>
<li><a href="#!">List item 3</a></li>
<li><a href="#!">List item 4</a></li>
<li><a href="#!">List item 5</a></li>
<li><a href="#!">List item 6</a></li>
<li><a href="#!">List item 7</a></li>
<li><a href="#!">List item 8</a></li>
</ul>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
