Partage
  • Partager sur Facebook
  • Partager sur Twitter

Afficher/Cacher une div/article/sectio par un Clic

26 août 2014 à 13:29:05

Bonjour à tous, je requiert votre aide s'il vous plaît . ^^ 

Je débute dans le HTML/CSS, une question me taraude, est-il possible de faire apparaître et disparaître une <div> ou <section> lors d'un clique fait par l'utilisateur sur un bouton mis sur le site dédiée pour cet fonction ?

-
Edité par F. Damon 26 août 2014 à 13:40:07

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 13:34:20

Tu peu le faire avec javascript et jquery
<script>
$(function(){
   $('#tonBoutton').click(function(){
      $('#tonDiv').toggle() // AFFICHE ET CACHE A CHAQUE CLIQUE SUR LE BOUTTON
   });
});
</script>

-
Edité par titamrtn 26 août 2014 à 13:35:05

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 13:40:47

Ooooooooooooooooooooooooooooooooooooooooooh ! je vais test ça desuite ! (quel rapidité !!!!)

-
Edité par F. Damon 26 août 2014 à 13:43:21

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 13:44:07

je dois le mettre dans le HTML ou CSS ?
  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 13:56:32

En fait je ne comprend pas comment l'utiliser....
  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 14:11:57

bonjour inutile de le faire en JS et encore moins avec JQuery quand on peux le faire en css.je rappel que le JavaScript ce désactive

inspire toi de ce topic http://fr.openclassrooms.com/forum/sujet/agrandissement-div-lors-d-un-clic

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 14:20:58

C'est juste une solution parmi tant d'autre tu peut aussi utiliser ceci si tu cherche la solution sans javascript et encore moins jquery comme le dit casperweb :p .

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 15:58:46

Ou sinon simplement <details> </details>..

Et pour mettre un autre texte que " Details " en haut, utilises <summary>

  • Partager sur Facebook
  • Partager sur Twitter
26 août 2014 à 20:04:29

Je ne savais pas, autant pour moi !

En même temps, ne pas utiliser Chrome.. :D

  • Partager sur Facebook
  • Partager sur Twitter
27 août 2014 à 13:37:38

Bonjour,

Parfois le CSS ne peut répondre à certaines configurations, on a donc besoin de JavaScript, mais si l'on peut se passer de jQuery pour une chose simple, c'est mieux ; voici une version JavaScript sans jQuery::

<body>  
<button id="Bouton">Press me !</button>
<div id="tonDiv">Hello !</div>
  
<script>
document.querySelector("#Bouton").onclick = function() {
if (window.getComputedStyle(document.querySelector('#tonDiv')).display=='none'){
document.querySelector("#tonDiv").style.display="block";
} else { 
document.querySelector("#tonDiv").style.display="none";
}
}
</script>

</body>

CSS

#tonDiv{
display:none;
background:gold;
}


EDIT: Pour le plaisir, on peut encore compacter le code JS avec un ternaire:

<script>
document.querySelector("#Bouton").onclick = function() {  
document.querySelector("#tonDiv").style.display=(window.getComputedStyle(document.querySelector('#tonDiv')).display=='none') ? "block" : "none";  
}
</script>

Un peu moins lisible, mais ça fonctionne aussi bien.

-
Edité par philiga 27 août 2014 à 14:09:49

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
29 août 2014 à 21:36:37

C'est génial, merci à toutes vos réponses . J'ai repris le code de Philiga, et marche nikel !
  • Partager sur Facebook
  • Partager sur Twitter
29 août 2014 à 21:44:45

d'ailleurs je m'éclate en ce moment même à jouer avec le code que tu ma donner, il est vraiment puissant ^_^
  • Partager sur Facebook
  • Partager sur Twitter
29 août 2014 à 21:53:22

j'ai une autres question, est-ce qu'avec Java nous pouvons lors d'un survol sur une image elle augmente en contrast ou un genre d'effet lumineux ? (c'est une question qui m'est passer par la tête, même si ça parait un peu loufoque ! :p)
  • Partager sur Facebook
  • Partager sur Twitter
29 août 2014 à 22:02:25

Content qu'il te te serve et te plaise !

J'ai me suis 'amusé" moi-même à le créer en voulant voir ce qu'on pouvait faire en pur JavaScript parce que je trouve un peu agaçant ce recours systématique à jQuery dès qu'il faut du JS.

Je ne suis pas le seul à penser qu'on en abuse d'ailleurs : il y a même un site nommé: 

http://youmightnotneedjquery.com/?hn

et celui-ci dans le même ton:

http://www.leebrimelow.com/native-methods-jquery/

Très utiles pour ceux qui ont la 'gâchette' jQuery trop facile ! 

Ici mon dernier code est un peu abscons d'être si concentré, mais il fait en 3 lignes ce que jQuery fait en 5 ; c'est donc un bon exemple de l'inutilité du recours systématique à jQuery.

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
29 août 2014 à 22:06:34

dfabbi a écrit:

j'ai une autres question, est-ce qu'avec Java nous pouvons lors d'un survol sur une image elle augmente en contrast ou un genre d'effet lumineux ? (c'est une question qui m'est passer par la tête, même si ça parait un peu loufoque ! :p)


Oui, on peut faire des effets en JavaScript (et non Java qui est un autre langage), mais aujourd'hui avec CSS3, la plupart des effets souhaités ne requièrent plus de JS et se font très simplement en CSS.

http://www.w3schools.com/css/css3_animations.asp

http://www.w3schools.com/css/css3_transitions.asp

-
Edité par philiga 29 août 2014 à 22:07:32

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
29 août 2014 à 22:25:51

wow, c'est du costaud ce qu'li y a ! ^^ merci ! c'est sure j'vais touver mon bonheur !
  • Partager sur Facebook
  • Partager sur Twitter
11 décembre 2019 à 10:47:36

Bonjour Philiga,

Je déterre ce post en espérant trouver une solution. J'ai utilisé ton script ci dessous qui fonctionne parfaitement bien. Merci beaucoup.Je voudrais mettre plusieurs scripts identiques (avec du contenu différent bien sûr) sur une même page. Hors, quand je fais cela, seul le premier bouton s'ouvre pour afficher ce qui est caché. Les autres ne s'ouvrent pas. Y aurait-il une solution à ce problème. Merci beaucoup pour votre aide.

philiga a écrit:

Bonjour,

Parfois le CSS ne peut répondre à certaines configurations, on a donc besoin de JavaScript, mais si l'on peut se passer de jQuery pour une chose simple, c'est mieux ; voici une version JavaScript sans jQuery::

<body>  
<button id="Bouton">Press me !</button>
<div id="tonDiv">Hello !</div>
  
<script>
document.querySelector("#Bouton").onclick = function() {
if (window.getComputedStyle(document.querySelector('#tonDiv')).display=='none'){
document.querySelector("#tonDiv").style.display="block";
} else { 
document.querySelector("#tonDiv").style.display="none";
}
}
</script>

</body>

CSS

#tonDiv{
display:none;
background:gold;
}


EDIT: Pour le plaisir, on peut encore compacter le code JS avec un ternaire:

<script>
document.querySelector("#Bouton").onclick = function() {  
document.querySelector("#tonDiv").style.display=(window.getComputedStyle(document.querySelector('#tonDiv')).display=='none') ? "block" : "none";  
}
</script>

Un peu moins lisible, mais ça fonctionne aussi bien.

-
Edité par philiga 27 août 2014 à 14:09:49



  • Partager sur Facebook
  • Partager sur Twitter
11 décembre 2019 à 14:43:23

Bonjour,

C'est normal, un ID devant être unique, utilisé une seule fois sur une même page.

Il faut donc changer le nom des ID dans l'html et dans le JS pour les éléments html suivant le 1er.

Tu peux si tu n'en as pas plus de 3 ou 4, tu peux ajouter autant de fois le code modifié que nécessaire en incrémentant les noms des ID comme ceci:

document.querySelector("#Bouton").onclick = function() { 
document.querySelector("#tonDiv").style.display=(window.getComputedStyle(document.querySelector('#tonDiv')).display=='none') ? "block" : "none";
}
document.querySelector("#Bouton2").onclick = function() { 
document.querySelector("#tonDiv2").style.display=(window.getComputedStyle(document.querySelector('#tonDiv2')).display=='none') ? "block" : "none";
}

S'il y en a plus, il faut faire une boucle qui balaie, du genre:

<article>  Mon premier article </article>
<article>  Mon second article </article> $('article').on('click',function(){
this.style.backgroundColor=(window.getComputedStyle(this).backgroundColor=='rgb(0, 128, 0)') ? "red" : "green"; });

Mais ce dernier code utilise jQuery, ce qui n'est pas forcément un souci, notamment si tu es sur Wordpress qui le charge. 

-
Edité par philiga 11 décembre 2019 à 14:45:14

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
11 décembre 2019 à 17:10:47

Bonjour,

Merci beaucoup pour la réponse.

Comme tu l'as sans doute deviné, je ne suis pas très à l'aise avec tout ça. J'ai bien compris le problème d'avoir un ID différent pour chaque élément. Mais je ne sais pas changer le nom dans JS.

Je sais modifier des choses dans html ou css, mais JS, je n'ai jamais fait.

  • Partager sur Facebook
  • Partager sur Twitter
11 décembre 2019 à 18:12:31

Tu peux éditer le JS exactement comme l'html ou le CSS avec un simple éditeur de texte.

Il peut même être inséré directement dans l'html ; mais sur ma réponse précédente, j'ai oublié les balises, cela donnerait:

<article>  Mon premier article </article>
<article>  Mon second article </article>
<script>
$('article').on('click',function(){
this.style.backgroundColor=(window.getComputedStyle(this).backgroundColor=='rgb(0, 128, 0)') ? "red" : "green"; });
</script>

Si ton JS est dans un fichier séparé, tu édites ce fichier de la même façon (mais plus besoin des balises script si c'est un fichier .js)

Pour bidouiller sans risque, je te recommande cet excellent outil: https://jsbin.com/

où tu peux aussi ouvrir une colonne JS et tester à loisir (en faisant menu Add library/ JQuery si tu l'utilise comme dans le code ci-dessus).

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
10 avril 2020 à 17:00:10

Très bon recyclage du post. ♥
  • Partager sur Facebook
  • Partager sur Twitter
10 avril 2020 à 22:56:36

Ça n'était pas utile de le remonter pour ça ♥ Je ferme ce sujet, tout y est dit. Si quelqu'un a le même problème, la solution est là - sinon, ça n'est pas le même problème.
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)