I move two divs (open) when clicking, when the user clicks, I want the rest to reset. (It looks pretty clear in my fiddle)
The first time I run the script and click the objects, it works flawless, but if I continue clicking, it requires two clicks to function. I've tried functions involving .click() and e.preventdefault, but none of it worked. I've already spend to much time on this, so I hope someone can help me out on this.
Many thanks in advance!
$("#schoenen").toggle(
function () {
//schoenen
$("#rood_een").animate({'left':'480px'});
$("#rood_twee").animate({'top':'120px'});
//casual
$("#oranje_een").animate({'left':'240px'});
$("#oranje_twee").animate({'top':'120px'});
//schoenen
//$("#rood_een").animate({'left':'360px'});
//$("#rood_twee").animate({'top':'0px'});
//ceremonie
$("#blauw_een").animate({'left':'120px'});
$("#blauw_twee").animate({'top':'240px'});
//communie
$("#groen_een").animate({'left':'240px'});
$("#groen_twee").animate({'top':'360px'});
}, function () {
$("#rood_een").animate({'left':'360px'});
$("#rood_twee").animate({'top':'0px'});
});
$("#casual").toggle( function () {
//casual
$("#oranje_een").animate({'left':'120px'});
$("#oranje_twee").animate({'top':'0px'});
//casual
// $("#oranje_een").animate({'left':'240px'}); //$("#oranje_twee").animate({'top':'120px'});
//schoenen
$("#rood_een").animate({'left':'360px'});
$("#rood_twee").animate({'top':'0px'});
//ceremonie
$("#blauw_een").animate({'left':'120px'});
$("#blauw_twee").animate({'top':'240px'});
//communie
$("#groen_een").animate({'left':'240px'});
$("#groen_twee").animate({'top':'360px'});
}, function () {
$("#oranje_een").animate({'left':'240px'});
$("#oranje_twee").animate({'top':'120px'});
});