# Toepassing 2: tabbladen

Tabbladen worden vaak gebruikt op pagina's die zeer veel informatie bevatten. U kan de informatie mooi in blokken onderverdelen en via verschillende tabs de juiste data tonen of verbergen.

![](/files/-L9sGqVv8ubCC5nmK4wk)

{% hint style="success" %}
★ Open **animaties/toep\_tabs.html** en bekijk de HTML-code.
{% endhint %}

```markup
<ul class="tabNav">
    <li><a href="#!" class="active">Section 1</a></li>
    <li><a href="#!">Section 2</a></li>
    <li><a href="#!">Section 3</a></li>
    <li><a href="#!">Section 4</a></li>
</ul>
....
<section class="message-bar background-gray-light">
    <h2>Section 1</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 2</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 3</h2>
    <div>...</div>
</section>
<section class="message-bar background-gray-light">
    <h2>Section 4</h2>
    <div>...</div>
</section>
```

De navigatie is opgebouwd via een lijst met (dummy) links. Vanuit CSS worden de links horizontaal geplaatst en, afhankelijk van de toestand, krijgt de tab een andere achtergrondkleur.

In normale toestand is de achtergrondkleur van een tab lichtblauw en in de hover toestand is de achtergrond donkerrood.

Telkens men op een link klikt, komt de tab in zijn actieve toestand. Nu wordt de kleur grijs. De actieve toestand vindt u in de class *.active*.

Bij elke link hoort natuurlijk ook een datablok. Hiervoor gebruiken we een section-tag. De volgorde van de li-tags bepaalt welke section-tags zichtbaar/onzichtbaar worden.\
De eerste link-tag toont de eerste section-tag, de tweede link toont de tweede section-tag, enz...

We gaan het script zo universeel mogelijk opbouwen. Als u later een extra link en een extra section-tag toevoegt, moet dit automatisch als tabblad functioneren.

{% hint style="success" %}
★ Pas het script als volgt aan:
{% endhint %}

```markup
<style>
    main > section:not(:first-of-type) {
        display: none;
    }
    ...
</style>
```

Eerst gaan we, vanuit css, alle section-tags, behalve de eerste, verbergen.

{% hint style="success" %}
★ Test het resultaat in een browser.\
★ Voeg nu het click-event toe.
{% endhint %}

```javascript
$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        $('section:visible').hide();
        $('section:eq(' + index + ')').show();
    });
});
```

De navigatie bevat voorlopig vier links. Om te achterhalen welke link er werd aangeklikt, maken we gebruik van de methode `index()`. De selector `$('.tabNav a')` komt viermaal voor op de pagina. Voor de eerste link is `$('.tabNav a').index(this)` gelijk aan *0*, voor de tweede link is dit *1*, enz... De index van de geklikte link, bewaren we in de variabele *index*.

Vervolgens verwijderen we de reeds aanwezige class *.active* en voegen de class via\
`$(this).addClass('active')` opnieuw toe aan de geklikte link.

De variabele *index* hebben we nodig voor de section-tags. Eerst verbergen we alle section-tags om vervolgens de juiste section-tag te tonen. Voor de derde link wordt dit: `$('section:eq(2)').show();`

{% hint style="success" %}
★ Test het resultaat in een browser.
{% endhint %}

De tabnavigatie is in principe klaar, maar we gaan nog even een animatie toevoegen.

{% hint style="success" %}
★ Vervang de twee laatste lijnen uit het click-event door deze code:
{% endhint %}

```javascript
$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        $('section:visible').slideUp(function(){
            $('section:eq(' + index + ')').slideDown();
        });
    });
});
```

Met een slide-effect verdwijnt de zichtbare section-tag. Zodra het effect is afgerond, wordt de nieuwe data zichtbaar.

{% hint style="success" %}
★ Test het resultaat in een browser.\
★ Klik tweemaal na elkaar op hetzelfde tabblad.
{% endhint %}

De data verdwijnt en wordt vervolgens terug zichtbaar. We willen het slide-effect enkel als we op een ander tabblad klikken. Als we op het reeds actieve tabblad klikken, mag er helemaal niets gebeuren.

{% hint style="success" %}
★ Plaats een if-voorwaarde rond het slide-effect.
{% endhint %}

```javascript
$(function() {
    $('.tabNav a').click(function(){
        var index = $('.tabNav a').index(this);
        $('.tabNav a').removeClass('active');
        $(this).addClass('active');
        if ($('section:eq(' + index + ')').is(':hidden')) {
            $('section:visible').slideUp(function(){
                $('section:eq(' + index + ')').slideDown();
            });
        }    
    });
});
```

{% hint style="success" %}
★ Bewaar de pagina en test het resultaat in een browser.\
★ Voeg ook eens een vijfde link en een vijfde section-tag toe.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1itf.gitbook.io/jquery/7-animaties-en-effecten/toepassing-2-tabbladen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.