Toggle innerHTML

Question

I have seen various examples come close to what I'm looking for, but none of this describes him the way I exactly want him. I am new to jQuery, so explanations are welcome.

I am looking for this to switch innerHTML from - to + . Does anyone know a way to do this, effectively?

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, everything related to switching the inner text of an HTML element should help. =)

Answer 1

What about adding a class that will let you know the extended / compensated status?

Html

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

JavaScript:

 $(document).ready(function() { $(".A1").click(function() { var $this = $(this); $(".P1").toggle("slow") $this.toggleClass("expanded"); if ($this.hasClass("expanded")) { $this.html("-"); } else { $this.html("+"); } }); }); 

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

Answer 2

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

A little explanation: I install $("#A1").html() with the product of the tertiary operator, using it to check the current value of the text #A1 . If it is a + , I set the text of the element to - otherwise I set it to + .

However, you said effective. For this, it is important to note that if you intend to use the selector twice or more in the same function, you must save the jQuery object, which is obtained from the selector that you specified in the variable, so you do not need to re-run the selector every time. Here is the code with this modification:

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

Answer 3

Unable to switch content. You can check if $ ('. P1') is visible, and then change the +/- div accordingly.

Sort of:

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

Using the callback function (second argument of the .toggle() method) to perform the check ensures that you check after the animation is complete.

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

Answer 4

shorter version

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

Answer 5

Here is a method that uses class names in parent and CSS rules and should not modify the HTML content and work with the container and classes so that you can have several of them on the same page with only one piece of code:

HTML:

 <div class="container expanded"> <div class="A1"> <span class="minus">-</span> <span class="plus">+</span> </div> <h2 class="H1">Stuff</h2> <div class="P1"> Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff </div> </div>​ 

CSS

 .expanded .plus {display:none;} .collapsed .minus {display: none;} 

JavaScript:

 $(document).ready(function() { $(".A1").click(function() { $(this).closest(".container") .toggleClass("expanded collapsed") .find(".P1").slideToggle("slow"); }); }); 

Working demo: http://jsfiddle.net/jfriend00/MSV4U/