0

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/

Infinite Recursion
  • 6,511
  • 28
  • 39
  • 51
CRABOLO
  • 8,605
  • 39
  • 41
  • 68

6 Answers6

1

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.

Community
  • 1
  • 1
Adil
  • 146,340
  • 25
  • 209
  • 204
1

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();
});
Satinder singh
  • 10,100
  • 16
  • 60
  • 102
1

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")
    })
})
zzlalani
  • 22,960
  • 16
  • 44
  • 73
rajesh kakawat
  • 10,826
  • 1
  • 21
  • 40
1

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/

srakl
  • 2,565
  • 2
  • 21
  • 32
1

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');
})
user2775080
  • 73
  • 3
0

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);
});
cmd
  • 11,622
  • 7
  • 51
  • 61
Pooya
  • 1,508
  • 3
  • 17
  • 38