CODEWITHSUNDEEP
javascriptjquerytoggle
Danis35
Danis35

Reputation: 53

toggle doesn't work in jQuery

I don't know why this code of mine doesn't work... I want the "+" sign to be shown up and when we click on that sign then to be "-" and at the same time the paragraph be shown up. When we click the "-" sign to return in the initial state. 

$(document).ready(function() {
  $("#main").append("<img src='https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png' id='clickMe' />");
  $("#message").hide();

  $("#clickMe").toggle(function() {
      $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/minus-sign-10.png");
      $("#message").show();
    },
    function() {
      $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png");
      $("#message").hide();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="main"></div>
<p id="message">You should see this message!</p>

Upvotes: 1

Views: 724

Answers (2)

Danis35
Danis35

Reputation: 53

$("#main").append("<img src='https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png' id='clickMe' />");
$("#message").hide();

function toggle() {
  if ($("#message").is(':visible')) {
    $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png");
    $("#message").hide();
  } else {
    $("#clickMe").attr("src", "https://webapps-cdn.esri.com/graphics/ui/minus-sign-10.png");
    $("#message").show();
  }
}

$("#clickMe").click(function() {
  toggle();
});

It works!

Upvotes: 0

Jonathan.Brink
Jonathan.Brink

Reputation: 25433

Try this fiddle.

jQuery's toggle function doesn't handle the click event...you need to use click() for that.

var $clickMe = $("#clickMe"),
    $message = $("#message");

function toggle() {
    if ($message.is(':visible')) {
        $clickMe.attr("src","https://webapps-cdn.esri.com/graphics/ui/plus-sign-10.png");
        $message.hide();
    } else {
        $clickMe.attr("src","https://webapps-cdn.esri.com/graphics/ui/minus-sign-10.png");
        $message.show();
    }
}

$clickMe.click(function(){
    toggle();
});

Upvotes: 1

Related Questions