I've no idea what the guys above are trying to do, but to solve your problem just requires a little lateral thinking. The problem is that your current code hides
all of the
div elements within the menu. Now, we want one of those
divs to be open -- what should we do? Easy, open it! Using a nifty selector (jQuery has some really nice ones) we can grab hold of the correct
div as easy as pie.
Here's the amended code, I've just added one line (with a comment).
Code:
$(document).ready(function() {
$('div.menu > div').hide();
$('div.menu > h3').click(function() {
$(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
// Show the Services div by default
$('div.menu > h3:contains("Services") + div').show();
});
How's that work for you?
Edit: After reading the jQuery documentation, it's possible to select all of the
DIV elements not belonging to the
Services heading by modifying your original selector. The modification uses the handy
not and
contains filters.
PHP Code:
$(document).ready(function() {
$('div.menu > h3:not(:contains("Services")) + div').hide();
$('div.menu > h3').click(function() {
$(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
});