jQuery Toggle Div Switcher

Question

J'essaie de créer une page FAQ. La page aura 2 colonnes: la première colonne aura une liste de questions, la deuxième colonne aura les réponses. Essentiellement je voudrais cacher la colonne de réponse et quand une question est cliquée, elle apparaîtra. Lorsqu'une autre question est cliquée, la vieille réponse disparaît et la nouvelle réponse apparaît. Donc, je suppose qu'une bascule/Changer d'effet?

Voici la structure de ma sortie html de Drupal:

<!-- Question column --> 

<div id="question> 

    <div class="views-row views-row-1"> 
      <div class="question">Question 1 Here!</div> 
    </div> 

    <div class="views-row views-row-2"> 
      <div class="question>Question 2 Here!</div> 
    </div> 

     <div class="views-row views-row-3"> 
      <div class="question>Question 3 Here!</div> 
    </div> 

</div> 


<!-- Answer column --> 

<div id="answer> 

    <div class="views-row views-row-1"> 
      <div class="answer">Answer 1 Here!</div> 
    </div> 

    <div class="views-row views-row-2"> 
      <div class="answer>Answer 2 Here!</div> 
    </div> 

     <div class="views-row views-row-3"> 
      <div class="answer>Answer 3 Here!</div> 
    </div> 

</div> 

est maintenant ici ce que je réussi à faire jusqu'à présent. J'ai réussi à activer/désactiver la première question avec un effet de fondu animé. Quand il s'agit de cacher d'autres divs pour montrer une nouvelle div, je suis perdu. Pourriez-vous m'aider à modifier mon plugin jQuery?

 jQuery.fn.fadeToggle = function(speed, easing, callback) { 

     return this.animate({opacity: 'toggle'}, speed, easing, callback); 

     }; 



$(document).ready(function() { 

    $("#answer .views-row").hide(); 

    $("#question .views-row-1").click(function(){ 

    $("#answer .views-row-1").fadeToggle("slow"); 

    }); 

    }); 

Très apprécié pour toute aide! À la vôtre.

Answer 1

Je pense c'est ce que vous êtes après:

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 
$(function() { 
    $("#answer .views-row").hide(); 
    $("#question .views-row").click(function(){ 
     var i = $(this).index(); 
     $("#answer .views-row").eq(i).fadeToggle("slow").siblings().fadeOut(); 
    }); 
}); 

You can give it a try here, ce que nous faisons ici est d'obtenir la .index() du <div> vous avez cliqué dessus et en montrant le <div> correspondant à cet index ci-dessous (en utilisant .eq()). Le .siblings().fadeOut() est juste une supposition, qui cache la réponse précédente de sorte qu'un seul à la fois montre, si vous voulez montrer n'importe quel nombre à la fois, il suffit de supprimer cette partie.