How to make a expandable table on click of the link?

Question

I'm making a expandable table with Bootstrap and AngularJS.

What I want? I want and I need to make a div that expands when I click in the <a> element. Currently - with my code - if i click at the row of the <a> element also expands and I don't want this.

I WANT THE DIV EXPANDS JUST WHEN I CLICK AT THE <a> ELEMENT.

Any ideas?

http://jsfiddle.net/paragdiwan/9qJ2g/8/

Answer 1

If you do a log right at the start of the link function:

link: function(scope, element, attrs){
    console.log(element);
    // ...

You'll see that element is the <d-expand-collapse> tag, which wraps the entire space starting from top left of the link and ending at the bottom right of the expanded div.

That's why the following line catches every click inside every point of that space:

$(element).click( function() {

What you need is a click only on the link, so you'll need to find it and bind the click handler to it:

$(element).find('a.question.ui-link:first').click( function() {

Demo: http://jsfiddle.net/9qJ2g/142/