Cacher des div au click sur une div

Version imprimable

Bonjour,,

J'ai les elements suivants :
Code:

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:

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

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:

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:

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:

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:

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;
            }
        }
    });
});

Bonjour,

il y a quand même beaucoup plus simple :

Code:

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:

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

Code:

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
  });
 
});