JQuery - How to select specific DIV

Question

Ok, I am just trying to toggle this DIV .. There are many more that follow this HTML structure. The input-container and input-expand are working, as they toggle appropriately ..

How can I just toggle the internal div.header-image-open and div.header-image-close? I appreciate anyone who can help out!

 $(".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

You could try:

 $(".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

Your header-image-open is a child of input-header, so use .find() to get it. .next() gets the siblings of input-header.

Answer 3

You have mistakes there, u should use "find" (search "child") not "next". (because searching elements is in "this" element)

Answer 4

It looks like you are doing something similar to an accordion or collapsible panel. Take a look at this...

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

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