Deux bascules et deux clics sur la même fonction avec un comportement différent pour chaque clic

Question

J'essaie de créer un événement avec java-script qui me permettra de basculer entre les différentes cartes et de masquer et de montrer. il y a une carte de quatre, quand vous cliquez sur la première carte, il montre les informations qui sont sous la carte et quand vous cliquez à nouveau, cachez-le, la même chose pour les quatre cartes, mais je veux aussi que lorsque vous cliquez sur la deuxième ou la troisième carte dans le cas où la première carte est ouverte, elle ferme automatiquement la première pour montrer la seconde. Encore une fois un événement bascule entre les quatre cartes.

J'essaie d'utiliser cliquer deux fois de plus, mais il semble que je crée un conflit entre les deux.

comment puis-je faire pour résoudre ce problème.

c'est le code que j'utilise:

$("a[data-toggle]").on("click", function(e) { 
 
     e.preventDefault(); // prevent navigating 
 
     var selector = $(this).data("toggle"); // get corresponding element 
 
     $("article").hide(); 
 
     $(selector).show(); 
 
    });

article:not(#article1) { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="#article1">cart1</a> 
 
<a href="#" data-toggle="#article2">cart 2</a> 
 
<a href="#" data-toggle="#article3">cart 3</a> 
 
<a href="#" data-toggle="#article4">cart 4</a> 
 
    
 
<article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article2">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
<article id="article4">adipiscing elit, sed do eiusmod tempor</article>

Answer 1

Voici une méthode peu modifiée pour faire votre fonctionnalité de basculement, s'il vous plaît ajouter un parent à tous les article éléments et mis à display:none , lorsque vous voulez l'afficher, ajoutez la classe active. Faites-moi savoir si cela résout votre problème!

$("a[data-toggle]").on("click", function(e) { 
 
    e.preventDefault(); 
 
    var toggleThis = $('article' + $(this).attr('data-toggle') + '') 
 
    if (toggleThis.hasClass('active')) { 
 
    toggleThis.toggleClass('active'); 
 
    } else { 
 
    $("article.active").removeClass('active'); 
 
    toggleThis.addClass('active'); 
 
    } 
 
});

.wrapper article { 
 
    display: none; 
 
} 
 

 
article.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="#article1">cart1</a> 
 
<a href="#" data-toggle="#article2">cart 2</a> 
 
<a href="#" data-toggle="#article3">cart 3</a> 
 
<a href="#" data-toggle="#article4">cart 4</a> 
 
<div class="wrapper"> 
 
    <article id="article1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article2" class="active">sit amet, consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article3">consectetur adipiscing elit, sed do eiusmod tempor</article> 
 
    <article id="article4">adipiscing elit, sed do eiusmod tempor</article> 
 
</div>

Answer 2

Cela devrait cacher l'article sur un clic sans casser l'autre fonctionnalité:

$("article").click(function() { 
    $(this).hide(); 
});