jquery slide down function not working

Question

Hello I have a php file containing this

 <div id="center" class="column">
    <p>Staff please, <a id="open" href="#" >login</a> before accessing this page, no access to students.</p>
</div>

When clicking the login button it should open a panel, it works further up the page (on the header.php file) but not here. In the header I've got

<script src="js/slide.js" type="text/javascript"></script>

and

<script type="text/javascript" src="js/jquery.js"></script>.

My slide.js looks like this:

$(document).ready(function() {

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

}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow"); 
});     

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});     

});

You can see it not working here: http://webtest.jt-games.net/staff.php In the panel tab, it works, button but the text on the main part of the page it does not.

Answer 1

The button on the main page and the button in the sliding panel, both whos mission it is to open the panel, has the same ID, #open.

ID's must be unique, and jQuery will only work for the first ID with that name, and that's why it's not working with the link on the page.

You can give the link on the main page another ID, and just trigger the click event, like so:

$("#link_on_main_page_id").on('click', function(){
    $('#open').click();
});