# How to connect links to bootstrap accordion properly (angularjs)?

Full code >>> https://plnkr.co/edit/uyq9G2Nflr1iaxvr09Wa?p=preview

I have a bootstrap accordion that I want to connect to a number of svg circles with links on them.

Since i’m using angular, I have put ng-click="clickcollapseOuter($event)" directives on each svg link (outer circles). Which triggers this function defined in the angular controller: $scope.clickcollapseOuter = function(e) {
$('#accordion .collapse.in').collapse('hide');$('#inner-accordion .collapse.in').collapse('hide');

var targetcircle = $(e.target);$(".svgcircle").removeClass("fff-onfocus");
targetcircle.toggleClass("fff-onfocus");

var targetcontent = document.querySelectorAll('.' + targetcircle.attr("id"));
targetcontent = Array.prototype.slice.call(targetcontent);

console.log(targetcontent); // returns an empty array
targetcontent.collapse('toggle');
// TypeError: targetcontent.collapse is not a function

};


As you can see from my comments in this code section, I am having two issues:
Firstly, the targetcontent array is empty when it’s supposed to contain the target’s matching collapsible div (configured in the linked javascript file). Second, I am getting a TypeError when I try to use bootstrap’s collapse method on the matching div.

Also \$(".svgcircle").removeClass("fff-onfocus"); is not removing the class before it is added onto another circle.

Where am I going wrong ? Many thanks.

UPDATE

Empty array fixed by moving the id to the circle instead of its link.
Still working on the .collapse() not a function issue.

Source: AngularJS