jQuery - Uitklappen en inklappen


De onderstaande code kan gebruikt worden om een element met een klein effect uit te klappen en weer in te klappen. In dit geval is het element met de classnaam '.text' het element dat de verborgen content bevat, het klikken op het element met de classnmaa '.expand' zorgt ervoor dat het element '.text' in beeld verschijnt. Op de tweede regel staat een stukje code waarmee eventueel ook tekst vervangen kan worden. In dit geval wordt de tekst 'Uitklappen' na het uitklappen gewijzigd in 'Inklappen' en tevens wordt er een extra classnaam '.up' toegevoegd voor aanvullende opmaak met CSS indien dit gewenst is.

Klik hier om de content open te klappen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.

HTML

<p class="expand">Uitklappen</p>
<div class="text">Lorem ipsum dolor sit amet.</div>


jQuery

$(document).ready(function() {
        $(".text").hide();
        $(".expand").click(function() {
                $(this).next(".text").slideToggle(500);
                $(this).text($(this).text() == 'Uitklappen' ? 'Inklappen' : 'Uitklappen').toggleClass('up');
        });
});


CSS

.text {
        display:none;
        width:461px;
        margin:15px 0px 15px 0px;
        padding:10px;
        border:1px solid #ccc;
        background-color:#FFF;
}
.expand {
        text-decoration:underline;
        cursor:hand;
        cursor:pointer;
}

Accordeon

Op deze manier kun je eveneens eenvoudig een accordeon maken zoals hieronder inclusief knopjes om alle content in een keer te openen en ook weer in te klappen.

1. Klik hier om de content open te klappen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.
2. Klik hier om de content open te klappen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.
3. Klik hier om de content open te klappen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.
4. Klik hier om de content open te klappen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.
5. Klik hier om de content open te klappen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.

HTML

<div class="accordeon">
        <div class="expand">1. Klik hier om de content open te klappen.</div>
        <div class="text">Lorem ipsum dolor sit amet.</div>

        <div class="expand">2. Klik hier om de content open te klappen.</div>
        <div class="text">Lorem ipsum dolor sit amet.</div>

        <div class="expand">3. Klik hier om de content open te klappen.</div>
        <div class="text">Lorem ipsum dolor sit amet.</div>
</div>


jQuery

$(document).ready(function() {
        $(".text").hide();
        $(".accordeon div:first-child").addClass("expand_first");
        $(".expand").click(function() {
                $(".text").slideUp(500);
                if ($(this).next(".text").is(":visible")) {
                        $(this).next(".text").slideUp(500);
                } else {
                        $(this).next(".text").slideToggle(500);
                }
        });
});


CSS

.accordeon .expand {
        float:left;
        width:486px;
        height:20px;
        padding:5px 0px 5px 5px;
        border:1px solid #ccc;
        border-top:0px;
        background-color:#fff;
        color:#333;
        cursor:hand;
        cursor:pointer;
}
.accordeon .expand_first {
        border-top:1px solid #ccc;
}
.accordeon .text {
        display:none;
        float:left;
        width:471px;
        padding:10px;
        border:1px solid #ccc;
        border-top:0px;
        border-bottom:0px;
        background-color:#ff6600;
        color:#FFF;
}