I have added a quick horizontal accordion tutorial here:

http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/

I think I will have to try something else. Actually there are more than a 100 pages that trigger a full postback instead of an ajax callback. I would need to re-work on all and I do not have that much time to implement. Thanks anyways for your help. I think I will have to go with the FRAMEs solution and find a solution for the menu.

Few .aspx pages asynchronously execute server events and some of them trigger a full postback. Do you mean that full postback cannot be handled in this method? Its not possible at this point to make the changes in those pages.

Actually why I am looking for this method is because I did not want the Masterpage to load everytime a child-page server-event is executed. I could have used FRAMES for the same, but the dropdown menus do not work in that case as enough space is not available in the header-section FRAME.

In your method everything is working the way I want except that postbacks are not being handled and so it gets redirected to the page which triggered the postback. I read somewhere it can be achieved when using jQuery Tabs, but I am not using them.

Thanks in advance.

Have you tried using an ajax call on “btnClickMe”?

I have implemented your code and its works wonderfully. Now what I have done is that I have a “Parent.aspx” in which I have implemented your code and I am opening “Page01.aspx”, “Page02.aspx”, “Page03.aspx”. Now each of this page has controls which trigger server side events, i.e. postback takes place. The moment Postback takes place the page gets redirected to the page that triggered the postback. For example, consider “Page01.aspx” has got a button called “btnClickMe”. When I click on “btnClickMe”, then the current page changes from “Parent.aspx” to “Page01.aspx”. I want the page to remain “Parent.aspx” across postback generated by the child pages that are loaded in the content DIV. Can you haelp me on this one?

Thanks a lot in advance.

the post is a hope for me.
really.

If you change the jQuery code to the following it will allow the menu to close:

$('#nav > li > a').click(function(){
$('#nav li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});


See demo here.

Pages would generally be accessed via your main navigation or sub-navigation