Switcher

Options

Classe Description
.switcher Créer un switcher
.active Affiche la cible correspondante au chargement de la page
.disabled Désactive le switcher
data-target Id ou tableau de id
Indique le ou les éléments qui seront affichés lors du clique sur le switcher
data-group Classe ou tableau de classes
Indique les élements qui seront masqués lors du clique sur le switcher

Si data-target et data-group sont des tableaux, bien respecter l'ordre des guillemets : data-target='["target1", "target2"]'

Fonctionne sur le focus des input, select et textarea

Exemples

Simple

Groupe 1 - Cible 1

Groupe 1 - Cible 2

Groupe 1 - Cible 3

Groupe 1 - Cible 4

<button class="switcher active"   data-target="g1t1" data-group="g1">Switch 1 (active)</button>
<button class="switcher"          data-target="g1t2" data-group="g1">Switch 2</button>
<button class="switcher"          data-target="g1t3" data-group="g1">Switch 3</button>
<button class="switcher disabled" data-target="g1t3" data-group="g1">Switch 4 (disabled)</button>

<div id="g1t1" class="g1 card bgRed white">
    <p>Groupe 1 - Cible 1</p>
</div>

<div id="g1t2" class="g1 card bgBlue white">
    <p>Groupe 1 - Cible 2</p>
</div>

<div id="g1t3" class="g1 card bgGreen white">
    <p>Groupe 1 - Cible 3</p>
</div>

<div id="g1t4" class="g1 card bgorange white">
    <p>Groupe 1 - Cible 4</p>
</div>

Simple (sans .active)

Groupe 2 - Cible 1

Groupe 2 - Cible 2

Groupe 2 - Cible 3

<button class="switcher" data-target="g2t1" data-group="g2">Switch 1</button>
<button class="switcher" data-target="g2t2" data-group="g2">Switch 2</button>
<button class="switcher" data-target="g2t3" data-group="g2">Switch 3</button>


<div id="g2t1" class="g2 card bgRed white">
    <p>Groupe 2 - Cible 1</p>
</div>

<div id="g2t2" class="g2 card bgBlue white">
    <p>Groupe 2 - Cible 2</p>
</div>

<div id="g2t3" class="g2 card bgGreen white">
    <p>Groupe 2 - Cible 3</p>
</div>

Multiple + animations

Groupe 3 - Cible 1

Groupe 3 - Cible 2

Groupe 3 - Cible 3

Groupe 4 - Cible 1

Groupe 4 - Cible 2

Groupe 4 - Cible 3

<button class="switcher"        data-target='["g3t1", "g4t1"]' data-group='["g3", "g4"]'>Switch 1</button>
<button class="switcher active" data-target='["g3t2", "g4t2"]' data-group='["g3", "g4"]'>Switch 2 (active)</button>
<button class="switcher"        data-target='["g3t3", "g4t3"]' data-group='["g3", "g4"]'>Switch 3</button>


<div id="g3t1" class="g3 card bgRed white animated slideInLeft">
    <p>Groupe 3 - Cible 1</p>
</div>

<div id="g3t2" class="g3 card bgBlue white animated slideInLeft">
    <p>Groupe 3 - Cible 2</p>
</div>

<div id="g3t3" class="g3 card bgGreen white animated slideInLeft">
    <p>Groupe 3 - Cible 3</p>
</div>

<div id="g4t1" class="g4 card bgBlue white animated slideInRight">
    <p>Groupe 4 - Cible 1</p>
</div>

<div id="g4t2" class="g4 card bgGreen white animated slideInRight">
    <p>Groupe 4 - Cible 2</p>
</div>

<div id="g4t3" class="g4 card bgRed white animated slideInRight">
    <p>Groupe 4 - Cible 3</p>
</div>

Form

Groupe 5 - Cible 1

Groupe 5 - Cible 2

Groupe 5 - Cible 3

<form class="stackedForm" data-color="color1"  method="post">

    <div id="g5t1" class="g5 card bgRed white">
        <p>Groupe 5 - Cible 1</p>
    </div>

    <div id="g5t2" class="g5 card bgBlue white">
        <p>Groupe 5 - Cible 2</p>
    </div>

    <div id="g5t3" class="g5 card bgGreen white">
        <p>Groupe 5 - Cible 3</p>
    </div>

    <div class="input required">
        <label for="input01">Switch 1</label>
        <input id="input01" name="input01" type="text" class="switcher" data-target="g5t1" data-group="g5">
    </div>

    <div class="select">
        <label for="select01">Switch 2</label>
        <select id="select01" name="select01" class="switcher" data-target="g5t2" data-group="g5">
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
        </select>
    </div>

    <div class="textarea required">
        <label for="textarea01">Switch 3</label>
        <textarea id="textarea01" name="textarea01" class="switcher" data-target="g5t3" data-group="g5"></textarea>
    </div>

</form>