Sujet Précédent Sujet Suivant

Collapse bouton

Résolu/Fermé
malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 - Modifié le 13 juin 2021 à 20:07
 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

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
13 juin 2021 à 20:24
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"

0
Réponse 2 / 4
malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 1
13 juin 2021 à 21:05
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
0
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
13 juin 2021 à 22:23
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..
0
Réponse 3 / 4
malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 1
14 juin 2021 à 11:19
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éé :(
0
Réponse 4 / 4
malo91 Messages postés 45 Date d'inscription mardi 2 février 2021 Statut Membre Dernière intervention 3 août 2022 1
14 juin 2021 à 12:12
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
0
Altor
17 juin 2021 à 02:16
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.
0

Discussions similaires

Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses
symbole arrêt marche
strumpfi -
Raymond PENTIER -

2 réponses
Touche "home" sur pc portable.
Mario70 -
Bezulon -

25 réponses
Arrêt/démarrage via Bouton ON/OFF de l'alim
kekliard -
baaabu -

15 réponses