Check out this snippet of Javascript code:
for(var i=1;i<4;i++)
{
var img= ".img"+i;
$(img).on("click", function(){
var art = $(this).closest('article');
art.css('height', 'auto');
art.find('p').slideToggle(200);
if(this.src.indexOf("plus") > -1)
{
this.src = "images/min.png";
}
else
{
art.css('height', '62px');
this.src = "images/plus.png";
}
return false;
});
$(img).wrap($('<a>',{href: '#'}));
}
Although this code successfully adjusts the height of article elements, there seems to be an issue where the articles are interfering with each other. I've attempted to troubleshoot this problem without success. How can I overcome this obstacle?
To see the problem in action, visit my website www.stijnaerts.be
For instance, when you click on the + next to 'about me', the height adjusts correctly. However, clicking on the + next to 'contact' not only adjusts the height of the contact article but also interferes with the 'about me' article.
I hope I have clearly explained this issue.
Thank you for your help.