Collapse bouton

Résolu

malo91 Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
Altor - 17 juin 2021 à 02:16

hello tout le monde ! j'ai un souci ca fait des heures que je tourne et refais et je n'arrive pas à faire : j'ai besoin pour mon projet que la div de mes images d'une de mes pages s'affichent
en menu deroulant en cliquant pour le derouler en media query pour telehone vers 425.

J'ai essayé plein de chose ! à force meme mon button ne me deroule plus rien ! j'ai fai un collapse et surtout j'ai bien commencé par faire mon button et mis en None jusqu'à 426 en media query

<button class="btn btn-primary my-3"type="button" data-toggle="collapse" data-target="collapseResponsive" aria-expanded="false" aria-controls="collapseResponsive" id="voir_details">Images - Vidéos
        </button>

dans mon css : je l'ai mis de facon à ce que mon bouton "images video" n'apparaisse que à mon @media query 425 ca ok ! mais apres j'avoue que je sais plus ! :( je n'arrive pas
il faut du java scrip, j'ai ajouté dans mon fichier

$('.collapse').collapse()

j'ai aussi essayé l'accordion mais non plus ca ne va pas en Responsive"
bref j'arrive plus du tout j'ai aussi testé ca qui est au plus simple:

<div class="panel-group" id="accordion">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
									<button class="btn btn-primary my-3"type="button" data-toggle="collapse" data-target="collapseResponsive" aria-expanded="false" aria-controls="collapseResponsive" id="voir_details">Images - Vidéos
								</button>
									</h4>
								</div>
								<div id="collapse1" class="panel-collapse collapse in">
								<div class="panel-body">
								<div id="pictures_details">
								{% for picture in trick.pictures %}
									<a data-fslightbox="gallery" href="{{ asset('uploads/' ~ picture)}}">
									<img class="display-top img-fluid"  width="300" height="250" src="{{ asset('uploads/' ~ picture)}}" alt="{{ picture.subtitle }}" class="fill">
									</a>
								{% endfor %}
							</div>		</div>
								</div>
							</div>
						</div>

oui car j'ai du twig aussi !! projet symfony

quand je vais voir dans mon inspecteur : elles sont là mes images dans la div!!!

Alors si une bonne ame pouvait m'aider , je la remercie d'avance !!

merci

Afficher la suite

A voir également:

Collapse bouton
Bouton reinitialisation pc - Guide
Diagnostic bouton photo - Accueil - Outils
Bouton on/off comment savoir ✓ - Forum Matériel & Système
Symbole arrêt marche - Forum Word
Réinitialiser chromecast sans bouton - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Quel est l'id de la div à afficher ?
Car, au niveau de ton bouton.. tu cibles une DIV dont l'id serait : collapseResponsive

data-target="collapseResponsive"

Réponse 2 / 4

malo91 Messages postés 45 Date d'inscription Statut Membre Dernière intervention 1

hello ! oui C est le nom que je lui ai mis !

j'ai essayé plein de truc !! franchement cette fois je m'en sors pas !!! pour un truc pareil quand meme faut etre bete !

je viens d'enlever pour recommencer et j'ai juste laissé mon button et mon css pour qu'il ne se voit que en 425 !

mais je sais vraiment pas ce que je fiche :( !!

pas à pas je recommence mais non ! là comme je reprends je suis à cela :

<div class="box text-center">
							<button class="btn btn-primary my-3"type="button" data-toggle="collapse" data-target="collapseResponsive" aria-expanded="false" aria-controls="collapseResponsive" id="voir_details">Images - Vidéos
							</button>
						</div>
						<div id="pictures_details">
							{% for picture in trick.pictures %}
								<a data-fslightbox="gallery" href="{{ asset('uploads/' ~ picture)}}">
								<img class="display-top img-fluid"  width="300" height="250" src="{{ asset('uploads/' ~ picture)}}" alt="{{ picture.subtitle }}" class="fill">
								</a>
							{% endfor %}
						</div>

et mon css j'ai conservé : ca en media 426 :

#voir_details {
  display:inline;
}

sachant que j'ai ajouté une div "#voir_detail"

et ca en normal en dehors du responsive :

#voir_details {
  display: none;
}

jcomprend rien :(

merci desolee du derangement

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Moi ce que je ne comprends pas, c'est que j'ai beau relire le code que tu nous montres, je ne parviens pas à trouver la DIV qui aurait pour id :
collapseResponsive ...
Alors soit tu ne nous montre pas pourquoi de complet, soit j'ai des problèmes de lecture, soit tu n'as pas mis les bons identifiants..

Réponse 3 / 4

malo91 Messages postés 45 Date d'inscription Statut Membre Dernière intervention 1

hello non mais tu as bien raison !!
mais meme si je recopie uniquement :

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

juste ca !! et pourtant j'en ai ailleur dans mon projet ,, ca ne fonctionne pas je n'ai que le bouton !
là franchement je suis couléé :(

Réponse 4 / 4

malo91 Messages postés 45 Date d'inscription Statut Membre Dernière intervention 1

Bon alors voici ce que je viens de faire Enfin mon deroulement marche !!

					<p class="photos_responsive d-block d-sm-none text-center">
						<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
							Images  - Vidéos
						</button>
					</p>
					<div class="collapse" id="collapseExample">
						<div class="card card-body">
							<div id="pictures_details">
								{% for picture in trick.pictures %}
									<a data-fslightbox="gallery" href="{{ asset('uploads/' ~ picture)}}">
										<img class="display-top img-fluid" width="300" height="250" src="{{ asset('uploads/' ~ picture)}}" alt="{{ picture.subtitle }}" class="fill">
									</a>
								{% endfor %}
								<div class="d-block" id="videos">
									{% for video in trick.videos %}
										<iframe width="300" height="250" src="{{video.url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>

seulement on souci n'est pas résolu en totalité :
Oui mon button n'pparait que en media que j'ai choisi!
parfait !
mais comment je fait pour que mes images restent apparentes en temps normal? je ne veux qu'elles soient dans un bouton que en 426 mais etre visible pour les autres !! merci

Altor

Salut,
peut-être une solution en passant par du pur JavaScript (ou du JQuery).

if(window.innerWidth<=426){
   document.getElementById('collapseExample').className+='collapse';
/** en Jquery// $('collapseExample').addClass('collapse');
* aura l'avantage d'utiliser l'Event $( document ).ready(); et éviter une erreur si la page n'est pas chargé sinon en vanilla.js : //document.onload={...}
*/
}

Bien sûr il faut virer le class="collapse" en dur dans le HTML.
Je ne suis pas expert en Boostrap mais je ne voit pas pourquoi ça ferait des conflits, à tester.

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Quel est la touche shift sur le clavier

Bouton ON OFF, O ou I ?

ou est la touche shift sur un clavier

Touche "home" sur pc portable.

Votre réponse

Discussions similaires