CODEWITHSUNDEEP
jqueryhtmlevent-handling
CRABOLO
CRABOLO

Reputation: 8793

jQuery code for simple onClick not working, what am I missing?

I'm fairly new to jQuery, but I thought this would be simple enough to add an onClick function.

But for some reason it's not working. I'm thinking it's something little that I am overlooking. Also, I would like the div-1 to fade in slowly so it doesn't just appear right away.. But for some reason I can't even get the show to work.

Here is my html:

    <button id="button-1" style="height: 50px; 
width: 50px; background: red;">Click Me!</button>

    <div id="div-1" style="height: 400px; 
 width: 400px; background: blue; visibility: hidden;"></div>

and the jQuery

jQuery('#button-1').onClick(){
    jQuery('#div-1').show();
}

Here is a fiddle http://jsfiddle.net/2wsHd/

Upvotes: 0

Views: 260

Answers (6)

Pooya
Pooya

Reputation: 1558

Use this:

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

To handle the fade in. Use this:

jQuery('#button-1').click(function(){
    jQuery('#div-1').fadeIn(1000);
});

Upvotes: 0

user2775080
user2775080

Reputation: 73

use click() instead of OnClick() for jquery function.

Use display: none instead of visibility: hidden

Try this:http://jsfiddle.net/2wsHd/14/ http://jsfiddle.net/2wsHd/15/

$('#button-1').click(function(){
    $('#div-1').fadeIn('slow');
})

OR need to show and hide, by using toggle

$('#button-1').click(function(){
    $('#div-1').toggle('slow');
})

Upvotes: 1

srakl
srakl

Reputation: 2619

use display:none;

<button id="button-1" style="height: 50px; width: 50px; background: red;">Click Me!</button>
<div id="div-1" style="height: 400px; width: 400px; background: blue; display: none;"></div>

and your JQuery to:

$(function() { //on document ready
    $( "#button-1" ).click(function() { //when #button-1 is clicked
        $('#div-1').show(); //show #div-1
    }); //end of click
}); //end of document ready

and to make it fade in, change

$('#div-1').show();

to

$('#div-1').fadeIn(1000);

http://jsfiddle.net/2wsHd/13/

Upvotes: 1

Satinder singh
Satinder singh

Reputation: 10218

Remove visibility: hidden; of div id div-1 and set display:none

http://jsfiddle.net/2wsHd/3/

$('#button-1').on('click',function(){
    $('#div-1').show();
});

Upvotes: 1

Adil
Adil

Reputation: 148180

You have wrong syntax for binding click event, use display:none instead of visibility:hidden. As show and hide function use display property but not the visibility property.

Live Demo

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

If you want to use visibility property then do not use show and hide rather set property.

Live Demo

jQuery('#button-1').click(function(){
    document.getElementById('div-1').style.visibility = 'visible';
});

You can choose between these two according to your need. This post will help you in deciding which one to go for.

The visibility property only tells the browser whether to show an element or not. It's either visible (you can see it), or invisible (hidden - you can't see it).

The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), and some others (table, table-row, table-cell, flex, etc), reference.

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this,FIDDLE

HTML

<div id="div-1" style="height: 400px; width: 400px; background: blue; display:none;"></div>

javascript

$(function(){
    jQuery('#button-1').click(function () {
        jQuery('#div-1').fadeIn("slow")
    })
})

Upvotes: 1

Related Questions