Schalten Sie innerHTML um

Wie wäre es, wenn Sie eine Klasse hinzufügen, die Sie über den erweiterten/reduzierten Status informiert?

$(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>

Beispiel: http://jsfiddle.net/sGxx4/

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

Eine kleine Erklärung:Ich setze $("#A1").html() mit dem Produkt des tertiären Operators, um den aktuellen Wert von #A1 zu prüfen s Text. Wenn es ein + ist , setze ich den Text des Elements auf - , andernfalls setze ich es auf + .

Sie sagten jedoch "effizient". Zu diesem Zweck ist es wichtig zu beachten, dass Sie, wenn Sie einen Selektor zweimal oder öfter in derselben Funktion verwenden, das jQuery-Objekt, das sich aus dem von Ihnen angegebenen Selektor ergibt, in einer Variablen speichern sollten, damit Sie dies nicht tun müssen Führen Sie den Selektor jedes Mal erneut aus. Hier ist der Code mit dieser Änderung:

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

Es gibt keine Möglichkeit, den Inhalt umzuschalten. Sie könnten prüfen, ob $('.P1') sichtbar ist, und dann das +/- div entsprechend ändern.

So etwas wie :

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

Mit einer Callback-Funktion (das zweite Argument der .toggle() -Methode), um die Überprüfung durchzuführen, garantiert, dass Sie nach Abschluss der Animation überprüfen.

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