Salut,

Je suis coincé pour mon site je recherche un moyen pour faire apparaitre au clique sur image un texte correspondant.

L'effet que je recherche, c'est qu'en arrivant sur ma page, tous les liens soient visibles. Et qu'en cliquant sur une icone, le lien de la "zone-texte" correspondant reste visible et les autres disparaissent. L'icone1 doit être lié à link1 etc..

J'arrive à matcher le lien 1 avec le texte 1. Mais après en cliquant sur l'icone 2, le lien qui correspond n'apparait pas car cacher par mon clique sur le premier icone

Voici mon code:

<div class="icone">
    <a href="#" class="toggler1"><img src="/icone1" alt="" width="40" height="40" /></a>
    <a href="#" class="toggler2"><img src="/icone2" alt="" width="40" height="40" /></a>
    <a href="#" class="toggler3"><img src="/icone3" alt="" width="40" height="40" /></a>
</div>

<div class="zone-texte">
    <ul>
        <li class="toggle1"><a href="link1">Loremipsum1</a></li>
        <li class="toggle2"><a href="link2">Loremipsum2</a></li>
        <li class="toggle3"><a href="link3">Loremipsum3</a></li>
    </ul>
</div>

<script>
        //toggle1
            jQuery(document).ready(function()
            {
               jQuery('.toggle1').show();

               jQuery('a.toggler1').click(function()
              {
                  jQuery('.toggle2').toggle(400);
                  jQuery('.toggle3').toggle(400);
                  return false;
               });
            });
        //toggle2
            jQuery(document).ready(function()
            {
               jQuery('.toggle2').show();

               jQuery('a.toggler2').click(function()
              {
                  jQuery('.toggle1').toggle(400);
                  jQuery('.toggle3').toggle(400);
                  return false;
               });
            });
        //toggle3
            jQuery(document).ready(function()
            {
               jQuery('.toggle3').show();

               jQuery('a.toggler3').click(function()
              {
                  jQuery('.toggle1').toggle(400);
                  jQuery('.toggle2').toggle(400);
                  return false;
               });
            });
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

-
Edité par A1B2 12 février 2018 à 13:41:21

Yop,

hmmm j'avoue ne pas avoir trop comprit ton problème tu veux faire apparaitre un texte ou disparaitre les autres ?

A1B2 a écrit:

Je suis coincé pour mon site je recherche un moyen pour faire apparaitre au clique sur image un texte correspondant.

A1B2 a écrit:

L'effet que je recherche, c'est qu'en arrivant sur ma page, tous les liens soient visibles. Et qu'en cliquant sur une icone, le lien de la "zone-texte" correspondant reste visible et les autres disparaissent. L'icone1 doit être lié à link1 etc..

Hmmm sinon tu n'a pas besoin de mettre plusieurs  jQuery(document).ready(function() un seul suffira ou tu pourras mettre plusieurs fonctions ;

Ensuite je te propose de changer tes classes en id en effet pourquoi avoir des classes individuelles choisis les id ^^. Par contre les classes sont utile quand tu veux  donner un point commun a plusieurs élèments. J'ai tenté de résoudre un des deux problèmes que j'ai compris dis moi ce que tu as compris et ce que tu en pense

<div class="icone">
		    <p href="#" class="toggler" data-id="toggle1">Test1</p>
		    <p href="#" class="toggler" data-id="toggle2">Test2</p>
		    <p href="#" class="toggler" data-id="toggle3">Test3</p>
		</div>

		<div class="zone-texte">
		    <ul>
		        <li id="toggle1" class="toggle"><a href="link1">Loremipsum1</a></li>
		        <li id="toggle2" class="toggle"><a href="link2">Loremipsum2</a></li>
		        <li id="toggle3" class="toggle"><a href="link3">Loremipsum3</a></li>
		    </ul>
		</div>

		<script>
		        //toggle1
		            jQuery(document).ready(function()
		            {
		               $('.toggler').on('click',function(){
		               		var idAlpha=$(this).data('id');
							var idBeta = '#'+idAlpha;
							$('.toggle').hide();
							$(idBeta).show();
		               });
		            });
		</script>

(j'ai essayé de reprendre au maximum ton code mais j'ai juste lié jQuery différemment et vu que j'avais pas images j'ai mit du texte mais sinon tout le reste est intéressant pour toi)

et un petit lien pour t'aider dans le jquery sur les méthodes pour afficher ou cacher des éléments

-
Edité par Sanapag 12 février 2018 à 14:19:36

C'est exactement ce que je voulais !!! tu m'as bien comprise merci beaucoup pour ton aide et tes explications !!! Je garde ton lien en favori. Merci amigo

-
Edité par A1B2 12 février 2018 à 16:41:39

Hello j'essaie de faire en sorte qu'au clique la couleur des texte de la DIV "Icone" change. Chacune ayant une couleur différente (bleu, rouge, vert). Une idée ? Merci

-
Edité par A1B2 21 février 2018 à 12:08:21

Yop,

Au clic sur la div icône ?

Pour changer la couleur tu as plusieurs choix : le wrap si ej me trompe pas ou tu rajoute des span autour et donc tu peux choisir un style.

Ou alors une méthode que je trouve plus simple qui est l'ajout d'attribut et a ce moment la tu peux choisir une couleur.

Pour le choix de ta couleur je te laisse faire un peu comme tu le sens je te propose une solution ou les différentes couleurs sont écrite en dur dans le code

<div class="icone">
            <p href="#" id="toggler1" class="toggler" data-id="toggle1" data-couleur="red">Test1</p>
            <p href="#" id="toggler2" class="toggler" data-id="toggle2" data-couleur="green">Test2</p>
            <p href="#" id="toggler3" class="toggler" data-id="toggle3" data-couleur="blue">Test3</p>
        </div>
 
        <div class="zone-texte">
            <ul>
                <li id="toggle1" class="toggle"><a href="link1">Loremipsum1</a></li>
                <li id="toggle2" class="toggle"><a href="link2">Loremipsum2</a></li>
                <li id="toggle3" class="toggle"><a href="link3">Loremipsum3</a></li>
            </ul>
        </div>
 
        <script>
                //toggle1
                    jQuery(document).ready(function()
                    {
                       $('.toggler').on('click',function(){
                            var idAlpha=$(this).data('id');
                            var idBeta = '#'+idAlpha;
                            $('.toggle').hide();
                            $(idBeta).show();
                            // ici on fait le changement de couleur par rapport aux data couleur que j'ai mit dans tes toggler
                            var idCouleur = '#'+$(this).attr('id');
                            var couleur = $(this).data('couleur');
                            $(idCouleur).attr('style', 'color:'+couleur+';');
                       });
                    });
        </script>

PS : ne repose pas des questions sur un sujet (qui aurait du être résolu) mais crée en un nouveau plutôt

-
Edité par Sanapag 21 février 2018 à 13:33:54

Merci beaucoup:) cela fonctionne j'ai bien une couleur différente au clique sur chacune des icônes.

Par contre la couleur reste lorsque je clique sur une autre icône. J'aimerai que la couleur soit présente que lorsque l'icone est activée^^

Je reposte un nouveau sujet du coup https://openclassrooms.com/forum/sujet/fonction-toggle-background-color-au-clique-help