TalkPHP - Slide menu - show one div open on load.

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Slide menu - show one div open on load. (http://www.talkphp.com/javascript-ajax-e4x/1367-slide-menu-show-one-div-open-load.html)

Slide menu - show one div open on load.

Using JQuery, I have the following code:

PHP Code:


		
			
$(document).ready(function() {

    $('div.menu> div').hide(); 

    $('div.menu> h3').click(function() {

        $(this).next('div').slideToggle('fast')

        .siblings('div:visible').slideUp('fast');

    });

});

My HTML:

HTML Code:

<div class="menu">

        <h3>Home</h3>

        <h3>News</h3>

        <h3>Profile</h3>

        <div>Profile list goes here....</div>

        <h3>Services</h3>

        <div>Service list goes here....</div>

        <h3>References</h3>

        <div>References list goes here....</div>

        <h3>Jobs</h3>

        <h3>Contact</h3>

</div>

What code do I have to add, if I want the Services menu for example to be open onload?

Demo of current situation: http://www.phpencoder.org/

Looking forward to suggestions/examples!

instead of

PHP Code:


		
			
$(this)

use:

PHP Code:


		
			
$(variablename)

And use it in another function that you load on bodyload:

HTML Code:

<body onload="openDiv('services')">

And the function would look pretty basic, and use the variablename when you call the function...

thing is, the js doesnt loop - how do I tag the div with the variablename?

Add the slideToggle code to onload on <body> perhaps?

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');
    });
});

Perfect, thanks Salathe!

One more question, how can I call the h3 tag that I want opened? Eg. in my HTML file I have the following: menu.js?show=Services for Services?

At first, I thought this was going to be a nightmare but thankfully I was wrong! That said, it's not easy peasy so I'll show you the amended code first and explain what's going on later.

PHP Code:


		
			
$(document).ready(function() {



    // By default, reveal the first menu item automatically.

    // If JavaScript is loaded with menu.js?show=something

    // And the "something" item exists in the menu, then that

    // item will be revealed instead.

    var szDiv = 'div.menu > h3:not(:first) + div';

    var aShow = $('head > script[src^="menu.js"]:first').attr('src').match(/show=([^&]*)/);

    if (aShow && aShow[1] != "" && $('div.menu > h3:contains("' + aShow[1] + '")').length > 0) {

        szDiv = 'div.menu > h3:not(:contains("' + aShow[1] + '")) + div';

    }

    

    $(szDiv).hide();

    $('div.menu > h3').click(function() {

        $(this).next('div').slideToggle('fast', function() {

            $(this).siblings('div:visible').slideUp('fast')

        });

    });

    

});

Because you're going to be telling the script what to open by changing the HTML, it makes sense to have some kind of default action if/when you don't want to provide an item to show (via ?show=something) or if that item does not exist in your menu. The line starting var szDiv... stores a default selector to use in these cases. I'm not sure if you'll understand the selector syntax but basically by default we'll be telling everything but the first menu item to hide itself.

The next line, starting var aShow... is pretty complicated but shows the power of frameworks like jQuery. I'll go through step by step. $('head > script[src^="menu.js"]:first') is another complicated selector but don't let that put you off. All we're doing here is grabbing the first (if any) element in the HTML document which is a SCRIPT element within the HEAD of your HTML and has the SRC attribute pointing to our menu.js file. The next part, attr('src'), simply grabs the SRC attribute from that SCRIPT element. With match(/show=([^&]*)/) we text that SRC attribute against a regular expression which pulls out the provided show, if there is one.

The next line (the if statement) just checks to see whether we could actually pull out the item to show or not. If we could grab an item to show, then we change szDiv to a new selector which makes jQuery display that item rather than the default.

$(szDiv).hide(); then puts all of the above into action by hiding items which match the szDiv selector. This results in all of the divs being hidden except our chosen one, or the first one (default) if no item is chosen.

The rest of the script is identical to before, simply assigning something to do when the headings are clicked.