15

I'm trying to create something like a web accordion.

Visual example:

[TITLE DIV 1]
[CONTENT DIV 1]
[TITLE DIV 2]
[CONTENT DIV 2]
[TITLE DIV 3]
[CONTENT DIV 3]

I want to be able to toggle (jquery function toggle()) a "Content Div" by clicking on the respective "Title Div".

I've tried the following, but it doesn't work.

http://jsfiddle.net/Cs3YY/

HTML:

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 1</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 1</h2></div>

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 2</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 2</h2></div>

JQUERY:

$('.titleDiv').click(function() {       
        $(this).next('.contentDiv').toggle();
});

http://jsfiddle.net/Cs3YY/

I would describe my function process as such:

  1. When you click on a element with a class named "titleDiv", do:

1.1. Select that clicked element;

1.1.1. Select the next sibling of that clicked element with a class named "contentDiv";

1.1.1.1. Make the function toggle() act on this last element (With the class named "contentDiv");

It seems that I'm wrong or I'm missing something.

.

I'm including jquery 1.8.3 (Correctly).

This works when using ID's instead of classes (I'm trying to avoid using them).

I placed an alert inside the click function and it works (The problem is inside it).

Jonas
  • 121,568
  • 97
  • 310
  • 388
Edu
  • 2,354
  • 5
  • 32
  • 36

2 Answers2

39

Use .nextAll() and :first to get the next contentDiv

  $(this).nextAll('.contentDiv:first').toggle();

Demo here http://jsfiddle.net/Cs3YY/1/

Anton
  • 32,245
  • 5
  • 44
  • 54
  • 1
    Thanks Anton. I still do not understand the difference between next('.contentDiv') and nextAll('.contentDiv'), shouldn't both get to the element? (The nextAll would get all) – Edu Feb 15 '13 at 13:33
  • next gets the element directly after which in this case is bottomSeparator. Using nextAll gets all elements after, but using :first gets the first element with the selector(".contentDiv") – Anton Feb 15 '13 at 13:34
  • Shouldn't next('.contentDiv') select the first next element that is equal do the argument provided (Class contentDiv)? – Edu Feb 15 '13 at 13:39
  • 3
    No, next gets only the next element, writing a selector in next makes it possible to get the next element if it has the selector otherwise it gets null – Anton Feb 15 '13 at 13:42
  • 1
    Now I get it. It was a problem of english when I read the documentation, I taught it would compare until it actually finds a sibling, but it seems it just compares the next sibling. Thank you Anton. – Edu Feb 15 '13 at 13:47
-1

Although, it's because next() select the bottomSeparator. You could use that trick

$('.titleDiv').click(function() {       

    $(this).next().next().toggle();
});

http://jsfiddle.net/Cs3YY/12/

luxcem
  • 1,807
  • 22
  • 37
  • I think this is harder to maintain than other solutions, due to the 'magic' double-nexting – Niklas Wulff Feb 15 '13 at 13:27
  • If for some reason I change the HTML structure (removing the separator div or adding something before/after that separator), this would stop working. – Edu Feb 15 '13 at 13:35
  • 1
    Yes, that's just a trick and not very fexible, but I thought it'd show what was wrong. – luxcem Feb 15 '13 at 13:39