Bonjour bonjour, voila j'explique mon cas,

Je suis en train de faire une galerie d'image sur un site, donc j'ai des thumbs et des images, jusque la ça va. 

Les thumbs avec le titre de l'image s'affiche très bien avec un peu de php tout va bien, seulement j'aimerais afficher l'image correspondant au thumb au clic de celui-ci, voici mon code :

    <section class="gallery">
        <div class="container">
            <div class="row justify-content-center">
                <?php foreach ($list as $value): ?>
                    <div class="col col-md-4 col-lg-3">
                        <div class="cardImage">
                            <img src="img/Thumbs/<?php echo($value['thumbsPath']) ?>" alt="" class="folioThumb">
                            <h4><?php echo $value['nameImg']; ?></h4>
                            <img src="img/Photo/<?php echo($value['namePath']) ?>" alt="" class="folioImg">
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

et voici mon javascript :

$(function() {
    $('.folioThumb').click(function(){
        $('.folioImg').first().toggle();
    })
}); 

alors je sais bien que c'est faux puisque sa ne fonctionne pas, enfin presque, peut-importe sur le thumb sur lequel je clic c'est toujours
la même image qui s'affiche, ce qui est... embêtant...

Si quelqu'un aurait la solution pour pouvoir sélectionner uniquement l'élément de la classe .folioImg qui suit et pas toujours la même, je suis preneur

Merci et bonne journée !