JQuery Sliding Panel - Buttons not making it self invisible when clicked, and panel is open on load.

Question

I have been trying to figure out how I would be able to make a sliding panel work properly. The sliding portion of the panel is working flawlessly, my problems are:

• The panel is expanded on load.
• Buttons (two different buttons) who are suppose to be closing / opening are not self-hiding after being clicked.

So basically what I am trying to achieve is:

1. Open Webpage.
2. Click button "open" -> Button "open" Disappears
3. Button "close" appears
4. Panel is sliding down.

What I'm having is:

1. Open webpage -> Panel is already extended.

2. Click "open" button.

3. Nothing happens.

   Close button does not show, and the panel is untouched. Here is my coding:

HTML Code:

            <div id="toggle" style="list-style: none;">
                <input id="open" class="open" href="#" type="button" value="Open" />
                <input id="close" style="display: none;" class="close" href="#" type="button" value="Close" />              
            </div> 

JQuery:

    $(document).ready(function() {
    
        $("#open").click(function(){
            $("div#panel").slideDown("slow");
        }); 
    
        $("#close").click(function(){
            $("div#panel").slideUp("slow"); 
        });     
    
        $("#toggle a").click(function () {
            $("#toggle a").toggle();
        });     
        
    });

I would appreciate any sort of help. Thank you.

Answer 1

First of all, in your HTML code you didn't add #panel, and you didn't add any CSS
I have no idea what do you want to have in your #panel but I did something like this:
Here
I hope it will be helpful.