slide and collapse working together
I have a page with 4 rows and 2 cols, in each of this rows is a bootstrap accordion and an image which is in the other column.
When the header is clicked the accordion opens(bootstrap collapse) and a hidden div with images is shown under the image already visible on the page (slide jquery).
So with one click 2 divs open(accordion body+hidden div), this works for all 4 accordions when I use different ids for the accordions, but they stay open. I like to have them close if another header is clicked.
This code doesn't work
$('.accordion-heading').click(function (){
$('.slidepic').each(function (index) {
if ($(this).attr("id") == slides) {
$(this).slideDown(200);
} else {
$(this).slideUp(200);
}
});
});
There is a fiddle here: http://jsfiddle.net/SUpmn/5/
Could somebody shares his light on this?
Thx