Nested .click() trigger link needs to collapse main div

Question

How do I collapse the div.collapse if I have the .click() trigger nested in another div (with the name div.click)?

I've got my script working if I have my .click() trigger in the same div as the div.collapse, this is my #main. Now I want to put my trigger in a div called 'click'. This is the structure I want to have:

<div id="main">    
    <div class="collapse" style="display:none;">
    my content
    </div>
    <div class="click">
    <a title="Click here to see the collapse div" alt="Expand" class="expand" href="javascript:void(0);">click here</a>
    </div>
</div>

this is my jquery code so far, as I have no clue how to let it search one div back in the html structure:

  $jq("a.expand").click(function() 
  {  
    // hides matched elements if shown, shows if hidden 
    $jq("a.expand").prev("div.collapse")[o.method](o.speed); 
    $jq("a.expand").prev("div.collapse").prev()[o.method](o.speed); 

    return false;
  });

I hope someone can help me, thanks!

Not sure but I think previous refered to the previous sibling of `a.expand` wich does'nt exist. you should refer to the parent sibling. — Sebastien, Jul 23 '13 at 15:10
Maybe something like `$jq("a.expand").parent().prev("div.collapse")[o.mthod](0.speed);` — Sebastien, Jul 23 '13 at 15:12
the example you provided is one of the things I tried earlier, unfortunately without any luck. — nerdrocker, Jul 23 '13 at 15:35

Praveen · Answer 1 · 2013-07-23T15:12:44.260

0

Instead you can use .toggle().

 $jq("a.expand").click(function() 
  {  
    // hides matched elements if shown, shows if hidden === Toggle
    $jq(".collapse").toggle(); 

    return false;
  });

edited Jul 23 '13 at 15:12

answered Jul 23 '13 at 15:07

Praveen

55,303
33
133
164

thank you for your reply but I understand what .toggle() does. the thing is, the script works like a charm. it only brakes if I move the trigger click() to another div so I wonder what's the correct traversal to make it work again. – nerdrocker Jul 23 '13 at 15:49

score 0 · Accepted Answer · answered Jul 23 '13 at 15:08

0

$jq("a.expand").click(function(e)  {
    e.preventDefault();  
    // hides matched elements if shown, shows if hidden 
    $jq(this).parent().prev()[o.method](o.speed);
});

$(this) is the element that was clicked. parent() selects the immediate parent. prev() selects the sibling immediately preceding the target element. I also replaced your return false; with e.preventDefault().

answered Jul 23 '13 at 15:08

Jason P

26,984
3
31
45

But OP is using `return false`. `e.preventDefault()` and `return false` are same right? – Praveen Jul 23 '13 at 15:14
@user1671639 Not exactly: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Jason P Jul 23 '13 at 15:19
Works for me here: http://jsfiddle.net/a4yr5/. Do you have your code wrapped in a ready handler, and are you sure `o.method` and `o.speed` are valid? – Jason P Jul 23 '13 at 15:54
Very strange, on jsfiddle my code works fine.. this is my complete code: http://jsfiddle.net/9DJky/ – nerdrocker Jul 23 '13 at 16:10
Thanks Jason P, it works! The jQuery library wasn't loading correctly. I fixed it and it works with using e.preventDefault. – nerdrocker Jul 24 '13 at 12:51

Nested .click() trigger link needs to collapse main div

2 Answers2