Lista interativa com Jquery | Café ++
Publicado: 20/09/2017 - Everson Vansoski

Lista interativa com Jquery

Ocultar e exibir DIV com Jquery, HTML e CSS

Criamos uma lista com subitens dinâmicos que exibem/ocultam com o clique do usuário. Veja o exemplo abaixo:

Título do bloco 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus
Título do bloco 2
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi.
Título do bloco 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna.
Título do bloco 4
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar.

Utilizamos apenas CSS, HTML e Jquery para esse exemplo. Veja os trechos de código a seguir:

HTML


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="bloco">
    <div class="titulo">
        Título do bloco 1
    </div>
    <div class="texto">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis 
        at pulvinar vulputate, erat libero 
        tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. 
        Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus
    </div>
</div>
<div class="bloco">
    <div class="titulo">
        Título do bloco 2
    </div>
    <div class="texto">
        Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. 
        Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. 
        Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. 
        Vestibulum fermentum tortor id mi.
    </div>
</div>
<div class="bloco">
    <div class="titulo">
        Título do bloco 3
    </div>
    <div class="texto">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec 
        bibendum odio risus sit amet ante. 
        Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna.
    </div>
</div>
<div class="bloco">
    <div class="titulo">
        Título do bloco 4
    </div>
    <div class="texto">
        Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. 
        Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, 
        iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit 
        ullamcorper pulvinar.
    </div>
</div>

CSS

    .titulo{
        padding: 5px;
        background-color: #e84c3d;
        color: #ecf0f1;
        border-bottom: solid 1px #c1392d;
    }
    .texto{
        padding: 5px;
        background-color: #ecf0f1;
        display: none;
        color: #696969;
    }  

Jquery

    $(document).ready(function(){
        $(".titulo").click(function(){
            $(this).next().slideToggle();        
        });
    });

Criamos um modelo básico apenas como exemplo, você pode customizar e adaptar esse código ao seu projeto facilmente. Clique aqui para baixar o modelo.

Everson Vansoski
Analista de Sistemas no setor de contact center em São Paulo - SP