jQuery : How to keep a Top Sliding Panel in CLOSED state on page load

Question

Hi I am writing a small jQuery script which will toggle a hidden Top-Panel on the site.

My Script is like this:

// Expand Panel
$("#open").click(function(){
    $("div#top-panel").slideDown("slow");

}); 
// Collapse Panel
$("#close").click(function(){
    $("div#top-panel").slideUp("slow"); 
});     
// Switch buttons from "Open" to "Close" on click
$("#toppaneltoggle a").click(function () {
    $("#toppaneltoggle a").toggle();
});     

and the HTML is like this:

<div id="top-panel" class="one">
    <div class="wrap">
            <div class="widget">
                <jdoc:include type="modules" name="top-panel" style="xhtml" />
            </div>
    </div>
</div>
<div class="tab">
    <li id="toppaneltoggle">
    <a id="open" class="open" href="#">Checkout Special Offers</a>
    <a id="close" style="display: none;" class="close" href="#">Close This Panel</a>
    </li>
</div>

Currently on page load the panel state is OPEN however the toggle works fine on clicking the tab it closes. My issue is that I want this panel to be in a CLOSE state on page load and it should open only when clicked on the tab.

How do I achieve that?

Kindly help.

Answer 1

Wouldn't

<div id="top-panel" class="one" style="display: none;">

work?

Answer 2

I would just do this as a first statement after your document.ready:

$("div#top-panel").hide();

This will just hide the panel until the first click takes place.

Otherwise, you can also do this in your CSS:

#top-panel { display: hidden }

Answer 3

Don't use hide() or display:none; (these are the same) instead use slideUp in 0 milliseconds on startup.

$(function() {
   $("div#top-panel").slideUp(0);
});

if you use hide you will need to call show() before slideDown();