Bonjour

j'aurais besoin de cacher des cards en mode mobile tout en ayant la possibilité par un bouton 

de les afficher si besoin

je tente avec BS4

 <div class="d-none d-sm-none d-md-block collapse" id="showVideosCards">   
</div    

<button class="btn btn-primary d-xs-block d-sm-block d-md-none d-lg-none" type="button" data-toggle="collapse"
                data-target="#showVideosCards"
                aria-expanded="false" aria-controls="showVideosCards">
            Button montrer les vidéos
        </button>

sans succès

-
Edité par damirov 29 mars 2020 à 16:45:31

Bonsoir.

Si je comprends bien, tu arrives à avoir l'élément qui ne s'affiche pas sur les mobiles, mais tu n'arrives pas à faire fonctionner le système de collapse.

Si c'est bien le cas, c'est tout à fait normal, étant donné qu'il y a toujours la classe d-sm-none sur l'élément, par conséquence, collapse ou non n'y changera rien.

Il te faut plutôt faire un peu de javascript, pour supprimer/ajouter la classe d-sm-none lorsque le bouton est cliqué.

Par contre, si tu caches les deux éléments dès le début, je vois mal comment tu pourras interagir avec l'élément.

-
Edité par Lartak 29 mars 2020 à 21:59:33

En fait le bouton d'affichage devrait apparaitre au moment où les cards disparraissent visuellement

Tu as raison sans JS/jquery point de salut

j'ai ajouté 

    <script>
        if ($("#showVideosCards").hasClass("d-sm-none")) {
            $("#showVideosCards").removeClass("d-sm-none");
            $("#showVideosCards").addClass("d-sm-block");
            $("#showVideosCards").show();
        }

    </script>

Sur un test cela fonctionne reste à avoir in situ

Et je te remercie de ton intervention pertinente et pédagogique

 PS: je pense qu'il y a sans doute une écriture moins lourde pour le script mais tant que cela fait le job je m'en contente

-
Edité par damirov 30 mars 2020 à 9:45:55