Como criar unfold em qualquer item usando elementor

Crie Listas Expansíveis em seu Site com HTML e CSS

Quer adicionar um toque de interatividade ao seu site?

Aprenda como criar listas expansíveis com HTML e CSS. Este código simples permite que você exiba informações adicionais em sua página apenas quando necessário, economizando espaço e mantendo seu design limpo.

Coloque a div ou widget que precisa resumir com a class: listap

        /* Estilo para a lista oculta */
        .listap {
            overflow: hidden; /* Esconde o conteúdo fora da área da lista */
            max-height: 0;
            transition: max-height 0.5s ease-out; /* Adiciona uma transição suave */
        }
        /* Estilo para o botão */
        .toggle-button {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }

Coloque o botão no final do elemento que será resumido

<button class="toggle-button" onclick="toggleList()">Mostrar Lista</button>

Neste exemplo, a lista é inicialmente oculta com max-height: 0;, e uma transição suave é aplicada para criar um efeito de slide quando a lista é revelada. A função toggleList() agora ajusta a max-height da lista para revelar ou esconder o conteúdo. A altura total da lista é usada para calcular a max-height, garantindo que todos os itens sejam mostrados quando a lista é expandida. Você pode personalizar a duração da transição e outros estilos conforme necessário.

<script>
        function toggleList() {
            var list = document.querySelector('.listap');
            if (list.style.maxHeight) {
                list.style.maxHeight = null; // Fecha a lista
            } else {
                list.style.maxHeight = list.scrollHeight + 'px'; // Abre a lista para a altura total do conteúdo
            }
        }
    </script>

A lista é inicialmente oculta com max-height: 0;, e uma transição suave é aplicada para criar um efeito de slide quando a lista é revelada. A função toggleList() agora ajusta a max-height da lista para revelar ou esconder o conteúdo.

A altura total da lista é usada para calcular a max-height, garantindo que todos os itens sejam mostrados quando a lista é expandida. Você pode personalizar a duração da transição e outros estilos conforme necessário.