Clever Geek Handbook

JQuery - How to select a specific DIV

Ok, I'm just trying to switch this DIV. There are many more to this HTML structure. Container Entry and U-turn Entry work because they switch accordingly.

How can I just switch the inner div.header-image-open and div.header-image-close? I appreciate anyone who can help!

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


source to share


4 answers


You may 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);
  });
+1


source


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();
});
+1


source


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

0


source


You have errors, you should use "find" (search for "child") and not "next". (since the search items are in the "this" element)

0


source






More articles:


All Articles