Question

78

Toggle innerHTML

rated 0 times [ 82] [ 4] / answers: 1 / hits: 19493 / 12 Years ago, wed, march 14, 2012, 12:00:00

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. =)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 12 Years ago leifw · Accepted Answer

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/