Sujet Précédent Sujet Suivant

Problème slideToggle

Résolu/Fermé
hugo_d Messages postés 87 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 21 décembre 2013 - 28 nov. 2010 à 22:03
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 1 déc. 2010 à 13:27
Bonjour,


je dois réaliser un exercice pour mon cours de web qui consiste à créer un portfolio.
Pour bien comprendre ce que j'aimerai faire, je vous invite à jeter un oeil sur cet aperçu :
https://www.casimages.com/i/101128094859797306.jpg.html


J'aimerai le rendre assez dynamique en y ajoutant quelques effets notamment un Slide Toggle de telle sorte que lorsque je clic sur un carré gris (situé sur la partie central, ce qui représentera une miniature de mes travaux) la dernière partie du site (le grand carré blanc situé en dessous) se déroule avec toutes les informations concernant le travail en question.

Jusque ici pas de problème. Là où ca se complique c'est lorsque que j'applique le Slide Toggle à plusieurs miniatures. En effet lorsque je clique sur une d'entre elles alors qu'une autre était déjà enclenché, ca me fou un sacré bordel. Dans le sens ou j'ai les deux parties qui apparaissent mais l'une en dessous de l'autre. Je sais pas si vous me suivez ...

Bref ca serait pour savoir s'il existait un moyen de faire en sorte que lorsque je clic sur un de mes aperçus le slide toggle fermerait celui qui serait éventuellement ouvert pour ouvrir celui sélectionné.
Malheureusement je n'ai pas de site exemple mais je suis persuadé de déja avoir vu ce type d'effet. C'est super pratique, celà permet d'avoir énormément de contenue sur une seule et même page...


D'avance merci
Hugo

ps : si vous n'avez pas bien compris mon problème n'hésitez pas à me le dire je tâcherai d'être plus claire

5 réponses

Réponse 1 / 5
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
28 nov. 2010 à 22:58
Salut.

Il suffit de masquer l'élément déjà affiché.
Perso, je stockerais le contenu correspondant à chaque vignette dans un <div>.
Tous ces <div> seraient placés dans un <div> principale.

Par exemple :
<div id="contenus">
    <div id="contenu_vignette1">...</div>
    <div id="contenu_vignette2">...</div>
    <div id="contenu_vignette3">...</div>
    <div id="contenu_vignette4">...</div>
</div>


Ainsi, il te suffira de masquer tous les éléments du div#contenus
0
Réponse 2 / 5
hugo_d Messages postés 87 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 21 décembre 2013
29 nov. 2010 à 13:26
Pour ce qui est de l'organisation des Div, j'ai bien procédé comme tu dis.

Je vais tenter d'expliquer mon problème à l'aide de numéros et d'images ce sera surement plus simple (les images suives juste en dessous):

si je clic sur une première miniature (1) mon contenu (1) va apparaitre.
Et si maintenant je clique sur ma miniature (2) je vais avoir mon contenu (2) qui va s'ouvrir mais en dessous du contenu (1)
Je suis donc obligé de recliquer sur ma miniature (1) pour masquer mon contenu (1) et laisser la palce à mon contenu (2)

Exemple en images :
https://www.casimages.com/i/101129010950885796.jpg.html
https://www.casimages.com/i/101129011158893236.jpg.html

Ici ca va étant donné que je n'ai que 2 miniatures, mais si j'en ai 10 le visiteur devra à chaque fois retrouver la miniature qu'il a ouverte pour la masquer avant d'en ouvrir une autre.

Ma question est donc de savoir s'il existe un moyen pour forcer les autres contenus ouverts à se masquer pour laisser place au nouveau contenu sélectionné.

Donc dans mon exemple :
Si je clic sur ma miniature (2) alors que mon contenu (1) est affiché, celui-ci se ferme et laisse place au contenu (2) sans devoir aller recliquer sur ma miniature (1)

Si c'est possible, quelles sont les lignes de code à entrer.
Si pas existe-il un autre effet que le slide toggle qui permettrait d'effectuer ce que je veux ?

merci
0
Réponse 3 / 5
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
29 nov. 2010 à 18:40
Salut.

Comme je l'ai dit, il suffit de masquer tous les <div> dans le div les englobant.
Ensuite, tu afficheras le div voulu.

Sinon, tu peux stocker le div actuellement ouvert dans une variable.

Par exemple :
var current = null;

function afficher(id) {
    if(current != null) {
        current.style.display = 'none';
    }

    current = document.getElementById(id);
    current.style.display = 'block';

}


Il faudra ajouter ceci sur les vignettes :
onclick="afficher('div1');"
Où 'div1' est l'id du div qui contient le contenu correspondant à la vignette.
0
Réponse 4 / 5
hugo_d Messages postés 87 Date d'inscription jeudi 4 septembre 2008 Statut Membre Dernière intervention 21 décembre 2013
30 nov. 2010 à 21:59
Ok merci ca marche :-)

Par contre en rajoutant la ligne de code 
onclick="afficher('div1');"


je n'ai plus l'effet de déroulement du toggle, l'élément apparait d'un coup.
De plus si je reclique sur une miniature dont son contenu est affiché, impossible de le masquer. Le dernier élément visionné, déroulé apparait toujours.

Voici mon code pour mes deux image utilisant le toggle 
    	
<a href="#" onclick="afficher('miniature');".slideToggle('slow')"><img src="images/miniatures/image.jpg" width="119" height="59" /></a>

<a href="#" onclick="afficher('miniature2');".slideToggle('slow')"><img src="images/miniatures/image2.jpg" width="119" height="59" /></a>


Si tu désire le code complet de ma page n'hésite pas


Encore merci ;-)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
1 déc. 2010 à 13:27
Il faut évidemment adapter.
Je ne sais pas le nom de la fonction de déroulement, ou la bibliothèque que tu utilises (jQuery, Scriptaculous, etc).

Pour masquer, il suffit de vérifier si l'élément actuellement affiché est le même que celui qu'on demande à afficher. Si oui, alors on le masque.
0