Reveal Div with Hyperlink using jQuery

Question

I have a jQuery Panel that opens when clicking a button.

However, I'd like a 2nd link at the bottom of the page which opens the same panel.

How do I achieve this?

Here is my JSFiddle & my Javascript:

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");   
        $("#open").addClass("hidden");
         $("#close").removeClass("hidden");
    });     

    // Switch visiblility of the "Close Panel" button
    $("#close").click(function () {
        $("div#panel").slideUp("slow"); 
        $("#close").addClass("hidden");
        $("#open").removeClass("hidden");
    });

    });

Many thanks for any guidance.

Answer 1

it may be so simple but if you trigger the click event of your button, it should make the effect which you need to achieve.

$("#myLink").click(function(){
    $("#open").click();
    });

Here is the updated fiddle: http://jsfiddle.net/4dkoke6w/2/

if this is not exactly what you want, let me know and I can tweak it a little bit per your requirement.

Answer 2

Extend your selector:

// Expand Panel
$("#open, #link").click(function(){
    $("div#panel").slideDown("slow");   
    $("#open").addClass("hidden");
    $("#close").removeClass("hidden");
});     

Answer 3

Like this:

$(document).ready(function() {

function showPanel(){
 $("div#panel").slideDown("slow");   
        $("#open").addClass("hidden");
         $("#close").removeClass("hidden");
}

// Expand Panel
$("#open,#second-button-you-talked-about").click(showPanel); 
//or    
$("#open").click(showPanel);
$("#second-button-you-talked-about").click(showPanel);

// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
    $("div#panel").slideUp("slow"); 
    $("#close").addClass("hidden");
    $("#open").removeClass("hidden");
});

});

(you should also store your jQuery elements in variables)

Answer 4

use class instead of id

$(".opendivs").click(function(){
    $("div#panel").slideDown("slow");   
    $("#open").addClass("hidden");
     $("#close").removeClass("hidden");
}); 

give the class opendivs to all the links you want to open the div with