How do I display a div on button click?

Question

How can I show .quick-links-container on button click?

I had display: none; set but I took it off so you can see the container.

So far I have this but its not working:

$('.quicklinks-button').click(function(){$('#quick-links-container').show();});

Try here http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — , Jul 02 '13 at 14:38

score 2 · Answer 1 · answered Jul 02 '13 at 14:37

You forgot to add the jQuery library on the jsfiddel at the left panel.

Also, you were using an id (#) selector instead of a class selector (.) for quick-links-container.

Try this:

$('.quicklinks-button').click(function(){
    $('.quick-links-container').toggle();
});

Living example: http://jsfiddle.net/gnjNq/9/

score 1 · Accepted Answer · answered Jul 02 '13 at 14:36

1

Your element has that as a class, not an id, you want to show and hide so you need toggle, your fiddle didn't have jQuery added.

$('.quicklinks-button').click(
    function () {
        $('.quick-links-container').toggle(1000);
    }
);

DEMO

answered Jul 02 '13 at 14:36

Paul S.

64,864
9
122
138

Arun Kumar · Answer 3 · 2013-07-02T14:48:49.350

0

try this

demo

$('.quicklinks-button').click(function(){$('.quick-links-container').show();});

.quick-links-container{
right: 20px;
background-color: white;
height: 500px;
width: 200px;
position: absolute;
box-shadow:5px 1px 6px rgba(0,0,0,.2);

}

edited Jul 02 '13 at 14:48

answered Jul 02 '13 at 14:40

Arun Kumar

1,607
1
18
33

score 0 · Answer 4 · answered Jul 02 '13 at 14:56

You didn't succeed because of following reasons:

You didn't include the jQuery in your example file.
You have a class called quick-links-container in your HTML but in your JS you are using #quick-links-container which returns an ID. So that needs to be changed to '.quick-links-container'
You are using only show() on click therefore on click the div will always be set to show, instead you can use toggle() to toggle the visibility of the div.

So, your javascript code needs to be modified to following:

$('.quicklinks-button').click(function(){ $('.quick-links-container').toggle();});

jsFiddle: http://jsfiddle.net/GautamChadha/U5Rwg/

score 0 · Answer 5 · answered Jul 02 '13 at 16:07

// you must use toggle
// this is jquery 

$('#hide').click(function(){
var current = $(this).val();
$('p').toggle();

// this will toggle the value of button from show to hide and vice versa

if(current == 'hide'){                
$('#hide').val('show');
}else{
    $('#hide').val('hide');
   }

});

How do I display a div on button click?

5 Answers5