Toggle innerHTML

Question

I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.

I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?

jQuery/JavaScript

$(document).ready(function() {
            $(".A1").click(function() {
                $(".P1").toggle("slow");
                $(".A1").html("+");
            });
        }); 

HTML

<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

Thank you, anything relating to switching the inside text of an HTML element shall help. =)

Solution 1

How about adding a class that will let you know the expanded/collapsed status?

$(document).ready(function() {
  $(".A1").click(function() {
    var $this = $(this);
    $(".P1").toggle("slow")

    $this.toggleClass("expanded");

    if ($this.hasClass("expanded")) {
      $this.html("-");
    } else {
      $this.html("+");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
  Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

Example: http://jsfiddle.net/sGxx4/

Solution 2

$(document).ready(function() {
    $(".A1").click(function() {
        $(".P1").toggle("slow");
        $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
    });
});

A bit of explanation: I'm setting $("#A1").html() with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.

However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:

$(document).ready(function() {
    $(".A1").click(function() {
        var $A1 = $(".A1");
        $(".P1").toggle("slow");
        $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
    });
});

Solution 3

There's no way to toggle content. You could check if the $('.P1') is visible, then changing the +/- div according to that.

Something like :

$(document).ready(function() {
    $(".A1").click(function() {
     $(".P1").toggle("slow", function(){
       if($(this).is(':visible'))
           $(".A1").html("-")
       else
           $(".A1").html("+")
     });
   });
}); 

Using a callback function (the second argument of the .toggle() method) to do the check will guarantee that you're checking after the animation is complete.

JsFiddle : http://jsfiddle.net/cy8uX/