Sin categorizar – Academia Carolina Alfonzo

ul { list-style: none; } a { text-decoration: none; } .acordion-menu { width: 100%; max-width: 350px; margin: 1rem auto; background: #000; border-top: 1px solid #f1f1f126; } .acordion-menu li.active .cabecera-dropdown { color: #b1747a; background: #000; } .acordion-menu li.active .cabecera-dropdown .fa-chevron-down { transform: rotate(180deg); } .cabecera-dropdown { cursor: pointer; display: block; padding: 12px; font-size: 19px; border-bottom: 1px solid #f1f1f126; color: #ffffff; position: relative; transition: all 0.4s ease-out; display: flex; align-items: center; height:2rem ; column-gap: 1rem; } .cabecera-dropdown .fa-chevron-down { position: absolute; right: 12px; } .contenido-submenu { display: none; background: #000; transition: 3s ease-in-out; animation: anime 0.4s ease-in; font-size: 1rem; } @keyframes anime { 0%{transform:translateY(-100%);opacity: 0;} 98%{opacity: 0.2;} 100%{transform: translateY(0); opacity: 1;} } .contenido-submenu li { border-bottom: 1px solid #f1f1f126; text-align: left; } li>ol, li>ul { margin-left: 0; } .contenido-submenu a { display: block; color:#fff; padding: 12px 12px 12px 25px; font-size: 19px; line-height: 1.5; transition: all 1s ease-out; } .contenido-submenu a:active { background-color: #000; color:#fff } /* .contenido-submenu a:hover { background-color: #2e5073; color:#fff } */ const acordion = function(multiple = false) { const acordion = document.querySelector(".acordion-menu"); const dropdownCabecera = acordion.querySelectorAll(".cabecera-dropdown"); dropdownCabecera.forEach((header) => { header.addEventListener("click", (e) => { const submenuItem = header.nextElementSibling; submenuItem.style.display = submenuItem.style.display === "block" ? "none" : "block"; header.parentElement.classList.toggle("active"); if (!multiple) { acordion.querySelectorAll(".contenido-submenu").forEach((submenu) => { if (submenu !== submenuItem) { submenu.style.display = "none"; submenu.parentElement.classList.remove("active"); } }); } }); }); }; acordion();