CODEWITHSUNDEEP
javascriptjquery
michaelmcgurk
michaelmcgurk

Reputation: 6509

Reveal Div with Hyperlink using jQuery

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.

Upvotes: 1

Views: 48

Answers (4)

Hirav Sampat
Hirav Sampat

Reputation: 196

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

Upvotes: 0

n00dl3
n00dl3

Reputation: 21564

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)

Upvotes: 0

Kate Miháliková
Kate Miháliková

Reputation: 2035

Extend your selector:

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

Upvotes: 0

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

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.

Upvotes: 1

Related Questions