Hello, I'm new to javascript and jquery library, I have script running which functions fine only problem I have with it is that I want to close other divs when another is selected, I guess like an accordion style but using the toggle, slide fade-in functions. The problem I have is that once each button that controls the relevant div is clicked once, on subsequent clicks it requires double clicking to show the containing div, where i want a single. I imagine it is a very simple solution but I have tried a number of ways without success, any help would be great, thanks
Here is the script Im using: $(document).ready(function() { $('div.me').hide(); $('div.who').toggle(function() { $(this).siblings('div.me').fadeIn(900); $('div.view').hide(); $('div.callme').hide(); $('div.imagesview').hide(); }, function() { $(this).siblings('div.me').fadeOut(500); return false; }); }); $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn(900); $('div.me').hide(); $('div.callme').hide(); $('div.imagesview').hide(); }, function() { $(this).siblings('div.view').fadeOut(500); return false; }); }); $(document).ready(function() { $('div.showwork').hide(); $('div.work').toggle(function() { $(this).siblings('div.showwork').fadeIn(900); }, function() { $(this).siblings('div.showwork').fadeOut(500); return false; }); }); $(document).ready(function() { $('div.callme').hide(); $('div.call').toggle(function() { $(this).siblings('div.callme').fadeIn(900); $('div.view').hide(); $('div.me').hide(); $('div.imagesview').hide(); }, function() { $(this).siblings('div.callme').fadeOut(500); return false; }); }); $(document).ready(function() { $('div.imagesview').hide(); $('div.images').toggle(function() { $(this).siblings('div.imagesview').fadeIn(900); $('div.view').hide(); $('div.me').hide(); $('div.callme').hide(); }, function() { $(this).siblings('div.imagesview').fadeOut(500); return false; }); });