How can I fix this script with jQuery toggle?

Question

I have tried to make working this jQuery script, but maybe there is something wrong. I wanted to make the script working by clicking on the arrow on the right side of the page. As you can see from the JavaScript code and jsfiddle test I have try to make slide down the hidden #top-bg.

The JavaScript code:

$(document).ready(function() {
    $(".bottone").click(function() {
        $("#top-bg").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

And this is the jsfiddle test: TEST

Where I'm doing wrong?

Answer 1

You're using "smart quotes" as opposed to regular quotes. Also, there is no need for the a tag, you can remove it and apply the click function directly to triangolo

$("#triangolo").click(function(){
    $("#top-bg").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

Updated jsFiddle

Answer 2

You are not using the right type of quotation marks.

There is a big difference between:

$(“.bottone”).click(function(){

And:

$(".bottone").click(function(){

Answer 3

You use the wrong quotes and also you try to catch a click on an empty tag (so nothing in fact)... ;)

Here is a JsFiddle that works : http://jsfiddle.net/uazw6/11/

  <div id="top-bg" class="bg"></div>
   <div id="top" class="bg">
   <div id="triangolo"><a href="#" class="bottone">test</a>
       </div>
  </div>

Javascript :

$(document).ready(function(){

  $(".bottone").click(function(){
      $("#top-bg").slideToggle("slow");
      $(this).toggleClass("active");
  });

});

Answer 4

I have fixed... I have updated your jsfiddle... test it...

your code is now like below...

$(document).ready(function(){

$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});

Answer 5

You can also fix this issue by changing below code

<div id="triangolo"><a href="#" class="bottone"></a>
           </div>

with

<a href="#" class="bottone"><div id="triangolo">
           </div></a>