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
RobertC
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
Quintin robinson
source
to share
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
RSolberg
source
to share
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
Ned batchelder
source
to share
You have errors, you should use "find" (search for "child") and not "next". (since the search items are in the "this" element)
0
IProblemFactory
source
to share