CODEWITHSUNDEEP
jqueryhtmlcssonclick
user1940007
user1940007

Reputation: 751

onClick not showing div

My jquery is not showing the div that I want it to at http://jsfiddle.net/jspence29/a3BQR/1/

I want the large divs to appear when you click on the button and dissapear when you click again, but it just isn't appearing. Thanks

Also, what is more rcommended using the css changing jquery or just this show and hide query?

$(".first1").onClick(
  function () {
    $('#suitsyou').show();
  },
  function () 
    $('#suitsyou').hide();
  });

or something like 

$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");
});

Upvotes: 0

Views: 739

Answers (5)

Niki Lichev
Niki Lichev

Reputation: 69

$(function(){
    $('div').hide()
$('li.first1').click(function(){
    $('div').hide()
   $('#suitsyou').slideToggle();
});
$('li.last1').click(function(){
   $('div').hide()
   $('#dealsandoffers').slideToggle();
});    
});

Upvotes: 1

JohnJohnGa
JohnJohnGa

Reputation: 15685

$(function(){
  $('li.first1').click(function(){
   $('#suitsyou').toggle();
  });
});

And hide the div in your html 

<div id="suitsyou" style='display:none'>

http://jsfiddle.net/A6Uvx/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

You have a large number of errors that I have corrected here: http://jsfiddle.net/a3BQR/4/ -- note that using .toggle in this way has been removed in jQuery 1.9. I just did it here for convenience.

  1. .onClick is not a function
  2. You are missing the open parentheses after function () for the second function.
  3. You didn't pick jQuery as your framework in jsfiddle

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

Your code is invalid, which you'd know if you'd looked at your browser's developer tools (you'll have errors in the console).

There's no onclick() function in jQuery, it's simply called .click() and it takes a single function to execute when that event is triggered. You can't pass two functions to be executed on alternate clicks, though jQuery does provide a function for that: .toggle() (not to be confused with the function that toggles the visibility of a set of elements)

Usage:

$(".first1").toggle(
    function () {
        $('#suitsyou').show();
    },
    function () {
        $('#suitsyou').hide();
    });

Upvotes: 0

karthikr
karthikr

Reputation: 99620

try toggle

$(".first1").on('click', 
  function () {
    $('#suitsyou').toggle();
  });
$(".last1").on('click', 
  function () {
      $('#dealsandoffers').toggle() 
  });

Upvotes: 2

Related Questions