JQuery - Comment sélectionner spécifique DIV

Question

Ok, j'essaie juste de basculer ce DIV .. Il y a beaucoup plus qui suivent cette structure HTML. Le conteneur d'entrée et l'extension d'entrée fonctionnent, car ils basculent de manière appropriée.

Comment est-ce que je peux simplement basculer entre div.header-image-open et div.header-image-close? J'apprécie tous ceux qui peuvent aider!

 
$(".input-header").click(function() 
     {  
     $(this).next(".header-image-open").toggle(); 
     $(this).next(".header-image-close").toggle(); 
     $(this).next(".input-container").slideToggle(600); 
     $(this).next(".input-container").next(".input-expand").slideToggle(600); 

     }); 

<div class="input-header"> 
    <div class="header-text"><h2 class="arial">Carat</h2></div> 
    <div class="header-image-open"><img src="/images/icons/expand-open.gif" /></div> 
    <div class="header-image-close"><img src="/images/icons/expand-close.gif" /></div> 
</div> 
<div class="input-container" style="height: 70px;"> 
    Content 
</div> 
<div class="input-expand"> 
    <p>Click to expand the color filter</p> 
</div> 

Answer 1

Vous pouvez essayer:

$(".input-header").click(function() 
    {  
    $(this).find(".header-image-open,.header-image-close").toggle(); 
    $(this).next(".input-container").slideToggle(600); 
    $(this).next(".input-container").next(".input-expand").slideToggle(600); 
    }); 

Answer 2

Votre tête-image-ouverte est un enfant de l'entrée en-tête, donc utilisez .Find() pour l'obtenir. .next() obtient les frères et sœurs de l'en-tête d'entrée.

Answer 3

Vous avez des erreurs là-bas, vous devriez utiliser "trouver" (recherche "enfant") pas "suivant". (parce que la recherche d'éléments est dans l'élément "this")

Answer 4

Il semble que vous fassiez quelque chose de similaire à un accordéon ou à un panneau pliable. Jetez un oeil à cette ...

http://jqueryui.com/demos/accordion/

$(function() { 
    $("#accordion").accordion(); 
});