Cacher des div au click sur une div

**henneka** · 04/05/2019, 18h51

Bonjour,,

J'ai les elements suivants :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div style="width:100%;height:80px;border:1px solid black;display:flex;flex-direction: row;">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</div>
 
<div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>

et mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(document).ready(function(){
            $("#1").click(function(){
                $("#one").toggle();
            });
 
        });

Je voudrai que le clic sur 1, 2, ou 3 ouvre le one two ou three correspondant (le toggle fait bien) mais ferme les elements auparavant ouverts

En brefs je voudrais avoir qu'une div ouverte en meme temps, a la manière d'un menu horizontal déroulant

Je peux bien sur fermer les autres éléments "en dur" mais peut être y a t il une méthode plus élégante

Par avance merci

**Watilin** · 05/05/2019, 21h30

C’est assez simple, il suffit de garder dans une variable une référence vers l’élément précédemment affiché.

Un problème dans ton script en particulier, c’est comment faire la correspondance entre les id en chiffres (1, 2, 3) et ceux en lettres (one, two, three). En utilisant la propriété target de l’évènement click, ainsi que les méthodes .index() et .eq(), on peut se passer des id et ça rend les choses plus simples.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>jQuery délégation click</title>
 
  <link rel="stylesheet" href="style.css" />
 
  <script defer src="jquery.js"></script>
  <script defer src="monscript.js"></script>
</head>
<body>
 
  <div class="click-parent flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
  <div class="show-hide-parent">
    <div>one</div>
    <div>two</div>
    <div>three</div>
  </div>
 
</body>
</html>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
jQuery(document).ready(function ($) {
    "use strict";
 
    $(".click-parent").click(function (event) {
        // this         = la div .click-parent
        // event.target = l’élément cliqué
        const index = $("div", this).index(event.target);
        console.log(index);
        if (index >= 0) {
            $(".show-hide-parent div").eq(index).toggle();
        }
    });
});

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.flex-container {
    width: 100%;
    height: 80px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
}
 
.click-parent div {
    cursor: pointer;
    flex: auto;
    text-align: center;
    background: #fa0;
    padding: 1ex;
    margin: 1ex;
}
 
.click-parent div:hover {
    background: #fc3;
}
 
.show-hide-parent div {
    background: #9bf;
    padding: 1ex;
    margin-top: 1em;
    display: none; /* divs masquées au départ */
}

Du coup, voici un exemple de comment faire sans .toggle() en gardant une référence dans une variable appelée visibleDiv :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
jQuery(document).ready(function ($) {
    "use strict";
 
    let visibleDiv = null;
 
    $(".click-parent").click(function (event) {
        // this         = la div .click-parent
        // event.target = l’élément cliqué
        const index = $("div", this).index(event.target);
        if (index >= 0) {
            const divToShow = $(".show-hide-parent div").eq(index);
            if (divToShow.is(visibleDiv)) {
                // si l’élément cliqué est déjà visible, on le masque
                // et on supprime la référence
                visibleDiv.hide();
                visibleDiv = null;
            }
            else {
                // sinon, on masque l’élément visible s’il existe,
                // on affiche l’élément cliqué,
                // et on met à jour la référence
                if (visibleDiv) visibleDiv.hide();
                divToShow.show();
                visibleDiv = divToShow;
            }
        }
    });
});

Invité · 06/05/2019, 09h15

Bonjour,

il y a quand même beaucoup plus simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div>
  <button type="button" class="btn" data-id="1">1</button>
  <button type="button" class="btn" data-id="2">2</button>
  <button type="button" class="btn" data-id="3">3</button>
</div>
 
<div>
  <div class="box" id="box-1">one</div>
  <div class="box" id="box-2">two</div>
  <div class="box" id="box-3">three</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.btn { cursor:pointer; }
.box { display:none; padding:10px; border:1px dashed #ccc; }

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
 
  $(".btn").on('click',function(){
    var id = $(this).data('id');  // on récupère le data-id
    $(".box:not(#box-"+id+")").hide(); // on ferme les box, suaf celle concernée
    $("#box-"+id).slideToggle(); // on ouvre ou ferme celle concernée
  });
 
});

Cacher des div au click sur une div

jQuery

Discussions similaires

Partager

Partager