Javascript masquer/montrer div

Question

J'ai un div javascript/show avec 4 divs différents en cours. Il fonctionne partiellement mais ne fonctionne pas comme je le souhaite. Lorsque je clique sur l'un des divs, il ouvre la div caché, ce qui est parfait, mais quand je clique sur l'autre lien pour ouvrir l'autre div je veux l'autre je clique d'abord pour fermer, puis le nouveau pour ouvrir. Voici mon javascript.

$('[id^="hideshow"]').on('click', function(event) { 
    var dataValue = $(this).attr('data-value'); 
    dataValue = $('#'+dataValue); 
    $(dataValue).toggle('hide'); 
}); 

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb"> 
    <hr class="dark2"> 
    <p></p>Whats in the Bag &nbsp;<i class="fa fa-angle-down" style="font-size:24px"></i></p> 
    </div> 
</div></a> 

    <div id='content2' style="display:none"> 
<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 
<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 

<div class="wedge-thumbs"> 
    <img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header"> 
    <a href="#" class="customize"><span style="customize"> Customize It</span></a> 
    <hr class="dark"> 
    <span class="title">Milled Grind 54&deg; LB</span> 

</div> 

</div> 

Answer 1

S'il vous plaît essayer cette

$('[id^="hideshow"]').on('click', function(event) { 
var dataValue = $(this).attr('data-value'); 
dataValue = $('#'+dataValue); 
$(dataValue).toggleClass('hide'); 
}); 

Answer 2

// Hopefully you have some selector reference to target them all 
var $all = $(".drops"); // Clearly I used .drops for example 

$('[data-value]').on('click', function(event) { 

    var $target = $('#'+ this.dataset.value); 

    $all.not($target).hide(); // Hide all but target one 
    $target.toggle();   // Toggle target one 
}); 

Voici un exemple amélioré:

var $all = $(".togglable"); 
 

 
$('[data-toggle]').on('click', function(event) { 
 

 
    var $target = $(this.dataset.toggle); 
 

 
    $all.not($target).hide(); // Hide all but target one 
 
    $target.toggle();   // Toggle target one 
 
});

[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;} 
 
.hidden{display: none;}

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

 
<a data-toggle="#el1">TOGGLE1</a> 
 
<a data-toggle="#el2">TOGGLE2</a> 
 
<a data-toggle="#el3">TOGGLE3</a> 
 

 
<div id="el1" class="togglable hidden">ELEMENT1</div> 
 
<div id="el2" class="togglable hidden">ELEMENT2</div> 
 
<div id="el3" class="togglable hidden">ELEMENT3</div>

Answer 3

Ce sera mieux si vous pouvez donner à vos divs un commo classe n au lieu de ids pour que vous puissiez cacher d'autres divs utilisant cette classe commune comme:

$('.common_class').addClass('hide'); 

Si vous ne pouvez pas vous en boucle pourrait par tous les divs et les cacher avant d'afficher le courant cliqué un:

$('[id^="hideshow"]').on('click', function(event) { 
    $('[id^="hideshow"]').each(function(){ 
     $('#'+$(this).data('value')).addClass('hide'); 
    }); 

    dataValue_id = $('#'+$(this).data('value')); 
    $(dataValue_id).toggleClass('hide'); 
}); 

Espérons que cela aide.

Snippet utilisant des classes communes:

$('.common_class').on('click', function(event) { 
 
    $('.common_class_2').not($('.common_class_2', this)).addClass('hide'); 
 
    $('.common_class_2', this).toggleClass('hide'); 
 
});

.hide{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='common_class'>DIV 1 
 
    <p class='common_class_2'>Content 1</p> 
 
</div> 
 
<div class='common_class'>DIV 2 
 
    <p class='common_class_2 hide'>Content 2</p> 
 
</div> 
 
<div class='common_class'>DIV 3 
 
    <p class='common_class_2 hide'>Content 3</p> 
 
</div> 
 
<div class='common_class'>DIV 4 
 
    <p class='common_class_2 hide'>Content 4</p> 
 
</div>