[Résolu] Exécuter un affichage sur valeur d'une variable

Bonjour,

J’ai déjà formulé ce sujet sur le forum, mais il n’a pas obtenu de réponses, c’est pourquoi je le reformule en espérant un meilleur succès.
Le script suivant permet par clic sur l’image « fleche_bas.png » de déplier (ouvrir), ou par un clic sur l’image « fleche_haut.png » de replier (fermer), tous les éléments sous balise h2 de la class="trigger"d’une page .
Un clic sur une balise h2 de la class="trigger" permet de déplier ou de replier les éléments disposés sous la balise h2 cliqué

Je souhaiterai ajouter une fonction qui permettrait de déployer tous les éléments h2 de la page en fonction d’une variable si elle est égale par exemple à oui (ouvrir).

Je ne suis pas très affûté sur le javascript, c’est la raison qui me pousse à demander de l’aide

Merci
Meilleures salutations

Le code HTML

<a id="ouvrir" href="#"><img src="../image/fleche_bas.png" class="ligne" alt=""></a>&nbsp;&nbsp;<a id="fermer" href="#"><img src="../image/fleche_haut.png" class="ligne" alt=""></a>

<h2 class="trigger"> <a href="#"><img src="../image/fleche_bas.png" class="ligne" alt="">&nbsp;&nbsp;<img src="../image/fleche_haut.png" class="ligne" alt="">&nbsp;Annuaire 
  des anciens de Maizières-lès-Metz</a></h2>
<section class="toggle_container"> 
<?php include("../page_membre/annuaire_maizieres.inc.php");?>
</section> 
<h2 class="trigger"> <a href="#"><img src="../image/fleche_bas.png" class="ligne" alt="">&nbsp;&nbsp;<img src="../image/fleche_haut.png" class="ligne" alt="">&nbsp;Annuaire 
  des anciens de St Germain en Laye</a></h2>
<section class="toggle_container"> 
<?php include("../page_membre/annuaire_st_germain.inc.php");?>
</section>

Le script

<script>
$(document).ready(function(){
    var $contenu = $('.toggle_container');
    $contenu.hide();
 
    $('h2.trigger').click(function(){
        $(this).toggleClass('active').next().slideToggle('slow');
        return false;
    });
     
    $('#ouvrir').click(function() {
        $contenu.show('slow');
        return false;
    });
     
    $('#fermer').click(function() {
        $contenu.hide('slow');
        return false;
    });
});
</script>

Salut,

Je comprend pas bien ce que tu veux faire...

pmara a écrit :
Un clic sur une balise h2 de la class="trigger" permet de déplier ou de replier les éléments disposés sous la balise h2 cliqué

Ca ok c'est ce que tu as fait. Quand tu cliques sur la fleche ca ouvre tout, et si tu clique sur un h2 ca ouvre le contenu qui suit.

pmara a écrit :
Je souhaiterai ajouter une fonction qui permettrait de déployer tous les éléments h2 de la page en fonction d’une variable si elle est égale par exemple à oui (ouvrir).

C'est pas ce que tu as déjà ?

[EDIT]
Ah attends, je crois que j'ai choppé la nuance

pmara a écrit :
déployer tous les éléments h2

tu veux afficher/masquer les h2 eux même et pas le contenu c'est ça ?? Et tu bloque ou du coup ? C'est la meme chose que pour la fleche et les contenus mais avec un autre élément et les h2
Modifié par _laurent (06 Feb 2020 - 15:33)

Bonjour,

Merci de vous intéresser à mon sujet.

Le script actuel permet de déplier replier tous les h2 de la page par un clic sur les flèches.
Je voudrai ajouter la fonction qui ne passerait pas par un clic (action physique au clavier) mais par un test sur la valeur d'une variable initiée par ailleurs (sans action physique au clavier).

Est-ce plus clair ?

Cordialement
Patrick Mara

Ah oui effectivement, merci.

Bah du coup, si l'init et le contrôle de la variable se fait ailleurs, ici je dirais un simple "if" :

if ($variable) {
     $contenu.hide('slow');
}

non ?

Bonjour,

J'ai finalement résolu mon problème en cherchant sur le net. En fait il faut réaliser ce qui est appelé un auto click.

Pour se faire il faut ajouter [0] devant .click(function(), il existe d'autres solutions.
Mon script est finalement le suivant sachant que l'ouverture de tous les h2 d'une page est déclenché si myVariable est égal à 1

$('#ouvrir').click(function() {
        $contenu.show('slow');
        return false;
    });

if (myVariable == 1) {
     $('#ouvrir')[0].click(function(){
       $contenu.show('slow');
       return false;
	});      
}

Cordialement

heu... quel est l’intérêt de mettre un "autoclick" à l'intérieur du if ? Je comprend pas....

Bonjour,

Pour exécuter un code sous condition , il est bien nécessaire de le placer dans un IF !!!
J'ai testé la solution présentée et elle fonctionne.

Cordialement

Salut

Tant mieux si tu as trouvé ta solution, mais je me dois de faire quelques commentaires :

$('#ouvrir').click(function() {
        $contenu.show('slow');
        return false;
    });

if (myVariable == 1) {
     $('#ouvrir')[0].click(function(){
       $contenu.show('slow');
       return false;
	});      
}

- Euh..... Si tu as besoin de faire $('#ouvrir')[0] c'est qu'il y a un gros problème.
Un ID est unique, et même pour une classe, quand on fait un event sur un élement, il n'y a absolument pas besoin de mettre de [0] je suis quasi sûr que tu as une erreur console.
- je ne comprend pas pourquoi tu as "deux" event click, un conditionner, l'autre non.
les conditions se mettent à l'intérieur de l'event, pas avant.
- pour ta fermeture/ouverture tu fais deux choses :

$('#ouvrir').click(function() {
        $contenu.show('slow');
        return false;
    });
     
    $('#fermer').click(function() {
        $contenu.hide('slow');
        return false;
    });

alors qu'un $contenu.toggle(), suffirait.

Bonjour,

Je me permet de rappeler que le code présenté fonctionne sans provoquer de message d'erreur.
Je ne suis pas une lumière en javascript, c'est pourquoi je approvisionne en code java sur le net, en prenant la précaution de bien tester et parfois d'ajouter ma touche personnelle.

Ceci dit mon code ne se lit pas : ('#ouvrir')[0] mais comme [0].click

Le [0] devant .click indique que le click se fait automatiquement sans action physique sur le clavier.

Cordialement

Merci je ne suis pas une lumière et je connaissais pas le [0], j'utilise soit .click() direct soit trigger() du coup mon commentaire au dessus ne vaut plus rien

Bonjour Jencal,

Je viens de constater que tu as posté sur ce forum sur le click automatique d'un bouton.
Aurais-tu une idée pour faire un clic automatique sur un lien <a href> ?

Sinon je vais créer un nouveau sujet sur ce forum.

Cordialement

J'ai pas compris, tu as déjà dit que Le [0] devant .click indique que le click se fait automatiquement sans action physique sur le clavier.
Mais tu demandes par la suite comment faire le click automatique ?
Mais tu as déjà répondu à cela.

Bonjour Jencal,

Oui mais cette fois je veux appliquer le [0].click à un lien, c'est autre chose.
Et je sais pas comment coder cela.

Merci pour ton aide

Cordialement

Non c'est la même chose, que ce soit un lien, un champs, un titre, un bouton.... dans tout les cas il faut cibler...

$("LA CIBLE HREF")[0].click()

Modifié par JENCAL (10 Feb 2020 - 15:37)

Je suis un peu perdu.
Je met quoi dans LA CIBLE HREF ?

pmara a écrit :
Je suis un peu perdu.
Je met quoi dans LA CIBLE HREF ?

Il faut mettre le selecteur, soit la classe soit l'ID de votre lien. pour le cibler.

Voilà ce que j'ai fait :

<script>
$("lien")[0].click();
</script>

<a id="lien" href="#bull_60">Vers bull_60</a>

<h2 id="bull_60" class="trigger">........

Mais ç'a ne fonctionne pas.

oui c'est normal.
D'ailleurs tu devrais avoir une erreur console;
La console du navigateur est très utile quand on développe en Javascript.

Un ID est selectionnable par un "#" (la classe elle, est séléctionnable par un ".")

Donc tu te dois de faire

$("#lien")

et non $("lien")

il faut le "#" pour dire "Selectionne moi l'élement qui est un ID et qui porte comme nom "lien"".

Si j'avais mis $(".test") ça voudrait dire "Sélectionne moi l'élement qui porte la CLASSE et qui a comme nom "test""

Merci pour les explications relatives à la sélection d'une ID et d'une CLASS.

C'a ne fonctionne toujours pas après la correction :

$("#lien")[0].click();

Désolé de prendre de votre temps mais je voudrais trouver une solution.

Bonjour,

Finalement j'y suis arrivé avec :

$('#lien')[0].click(function(){
     }); 

Remarque : il ne faut pas oublier de charger la bibliothèque Jquery pour que ce la fonctionne.

Merci

Cordialement