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/

`the row of the element` - isn't this the space right next to the link? — Al.G., Feb 02 '16 at 19:59
Yes, is this space. When I click in this the div expands and this isn't cool — Julio Cesar Boaroli, Feb 02 '16 at 20:01

score 1 · Accepted Answer · answered Feb 02 '16 at 20:08

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/

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

1 Answers1