admin管理员组

文章数量:1025207

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:

  • Removing the inline CSS that JavaScript injects, getting the fallback padding, and then setting the padding back to 0, but this messes up the animation.
  • Setting the padding to revert-layer to get the fallback padding, but this also disrupts the animation.
  • Creating a clone element to get the initial padding from there, but I couldn’t get it to work.

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=""></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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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 &gt;&gt;&gt;
                </a>
            </li>
        </ul>
    </div>
</div>
            </div>

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:

  • Removing the inline CSS that JavaScript injects, getting the fallback padding, and then setting the padding back to 0, but this messes up the animation.
  • Setting the padding to revert-layer to get the fallback padding, but this also disrupts the animation.
  • Creating a clone element to get the initial padding from there, but I couldn’t get it to work.

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"></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./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./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./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./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./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./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./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./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./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./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./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./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 &gt;&gt;&gt;
                </a>
            </li>
        </ul>
    </div>
</div>
            </div>

  • javascript
  • html
  • jquery
  • css
  • tailwind-css
Share Improve this question asked Nov 18, 2024 at 12:14 TelexxTelexx 7314 silver badges16 bronze badges 3
  • Meanwhile find a very good example, everyone meet this problem should take a look: codepen.io/ivanwebstudio/pen/OJVzPBL – Telexx Commented Nov 18, 2024 at 13:25
  • That example from your comment there already doesn't correctly restore inline styles. Edit the HTML to be <div id="target" style="padding-top:1em">, and you will see that this gets removed, and the default-styling applied via the stylesheet (8em) will apply again, after you slide this up and then down again once. – C3roe Commented Nov 18, 2024 at 14:47
  • This can be achieved in pure CSS, and eventually add JS if some additional elements groups toggling is necessary (which seems not to be your case, but you're missing the opportunity to create only one piece of JS code for many more such components in a single page.). Also, you're using Tailwind the hard/wrong way, @apply instead. A HTML tag should ideally not have more than two, three descriptive classes. (Why tailwind at all?) Also, don't repeat the SVG images all over your HTML document, use CSS instead. Also, it's not entirely clear what's the exact issue with your example above. – Roko C. Buljan Commented Nov 18, 2024 at 16:58
Add a comment  | 

1 Answer 1

Reset to default 1

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

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:

  • Removing the inline CSS that JavaScript injects, getting the fallback padding, and then setting the padding back to 0, but this messes up the animation.
  • Setting the padding to revert-layer to get the fallback padding, but this also disrupts the animation.
  • Creating a clone element to get the initial padding from there, but I couldn’t get it to work.

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=""></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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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 &gt;&gt;&gt;
                </a>
            </li>
        </ul>
    </div>
</div>
            </div>

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:

  • Removing the inline CSS that JavaScript injects, getting the fallback padding, and then setting the padding back to 0, but this messes up the animation.
  • Setting the padding to revert-layer to get the fallback padding, but this also disrupts the animation.
  • Creating a clone element to get the initial padding from there, but I couldn’t get it to work.

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"></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./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./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./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./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./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./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./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./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./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./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./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./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 &gt;&gt;&gt;
                </a>
            </li>
        </ul>
    </div>
</div>
            </div>

  • javascript
  • html
  • jquery
  • css
  • tailwind-css
Share Improve this question asked Nov 18, 2024 at 12:14 TelexxTelexx 7314 silver badges16 bronze badges 3
  • Meanwhile find a very good example, everyone meet this problem should take a look: codepen.io/ivanwebstudio/pen/OJVzPBL – Telexx Commented Nov 18, 2024 at 13:25
  • That example from your comment there already doesn't correctly restore inline styles. Edit the HTML to be <div id="target" style="padding-top:1em">, and you will see that this gets removed, and the default-styling applied via the stylesheet (8em) will apply again, after you slide this up and then down again once. – C3roe Commented Nov 18, 2024 at 14:47
  • This can be achieved in pure CSS, and eventually add JS if some additional elements groups toggling is necessary (which seems not to be your case, but you're missing the opportunity to create only one piece of JS code for many more such components in a single page.). Also, you're using Tailwind the hard/wrong way, @apply instead. A HTML tag should ideally not have more than two, three descriptive classes. (Why tailwind at all?) Also, don't repeat the SVG images all over your HTML document, use CSS instead. Also, it's not entirely clear what's the exact issue with your example above. – Roko C. Buljan Commented Nov 18, 2024 at 16:58
Add a comment  | 

1 Answer 1

Reset to default 1

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

本文标签： htmlReplacing jQuery slideToggle() with vanilla JavascriptStack Overflow

版权声明：本文标题：html - Replacing jQuery slideToggle() with vanilla Javascript - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745618992a2159461.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。