jQuery Toggle Text

Question

How to toggle HTML text of an anchor tag using jQuery  I want an anchor that when clicked the text alternates between Show Background  amp  Show Text as well as fading in  amp  out another div  This was my best guess    function            quot  show-background quot   click function                 quot  content-area quot   animate  opacity   toggle     slow                     quot  show-background quot   toggle function               this  text  quot Show Background quot            stop           function              this  text  quot Show Text quot            stop

User · Answer

Use html   to toggle HTML content  Similar to fflyer05 s code     fn extend       toggleText function a b           if this html    a  this html b           else this html a               Usage    lt a href     onclick    this  toggleText   lt strong gt I got toggled  lt  strong gt     lt u gt Toggle me again  lt  u gt     gt  lt i gt Toggle me  lt  i gt  lt  a gt    Fiddle  http   jsfiddle net DmppM

User · Answer

var el        someSelector        el text el text       view more     view less     view more

User · Answer

Perhaps I m oversimplifying the problem  but this is what I use     fn extend       toggleText  function a  b              trim this html       a   this html b    this html a

User · Answer

Sorry the problem is me  the was out of sync but this was because I have the HTML text the wrong way around  On the first click I want the div to fade out and the text to say  Show Text    Will check more thoroughly next time before I ask   My code is now     function           show-background   toggle function             content-area   animate  opacity   0     slow           show-background   text  Show Text          stop         function            content-area   animate  opacity   1     slow           show-background   text  Show Background          stop                Thanks again for the help

User · Answer

Why don t you just stack them         clickedItem   click function          animatedItem   animate           toggle      lt --- you just stack the toggle function here     function        this  text           function        this  text

User · Answer

Use this  jQuery fn toggleText   function         var altText   this data  alt-text        if  altText            this data  alt-text   this html             this html altText              Here is how you sue it    x000D   x000D    x000D     jQuery fn toggleText   function     x000D       var altText   this data  alt-text    x000D   x000D       if  altText    x000D        this data  alt-text   this html     x000D        this html altText   x000D         x000D         x000D   x000D          data-toggle  offcanvas     click function       x000D   x000D         this  toggleText    x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js  gt  lt  script gt  x000D   lt button data-toggle  offcanvas  data-alt-text  Close  gt Open lt  button gt  x000D   x000D   x000D    You can even use html provided it s html encoded properly

User · Answer

jQuery fn extend           toggleText  function  a  b               var isClicked   false              var that   this              this click function                     if  isClicked    that text a   isClicked   false                    else   that text b   isClicked   true                                return this                         someElement   toggleText  hello    goodbye      Extension for JQuery that only does toggling of text   JSFiddle  http   jsfiddle net NKuhV

User · Answer

lt h2 id  changeText  class  mainText  gt  Main Text  lt  h2 gt    function         var mainText       mainText   text            altText    Alt Text            changeText   on  click   function              this  toggleClass  altText                mainText   text mainText               altText   text altText

User · Answer

Nate-Wilkins s improved function   jQuery fn extend       toggleText  function  a  b            var toggle   false  that   this          this on  click   function                  that text  toggle    toggle    b   a                       return this              html    lt button class  button-toggle-text  gt Hello World lt  button gt    using       button-toggle-text   toggleText  Hello World    Bye

User · Answer

var jPlayPause       play-pause    jPlayPause text jPlayPause hasClass  playing      play     pause    jPlayPause toggleClass  playing      This is a piece of thought using jQuery s toggleClass   method   Suppose you have an element with id  play-pause  and you want to toggle the text between  play  and  pause

User · Answer

fn toggleText   function a       var ab   a split   s         return this each function            this  txIdx   this  txIdx  undefined     this  txIdx   0          this  txIdx   this  txIdx lt ab length   this  txIdx   0             this  text ab this  txIdx                    div   toggleText  Hello Word

User · Answer

You can also toggleText by using toggleClass   as a thought      myclass  after    content   more      myclass opened  after    content   less       And then use    myobject  toggleClass  opened

User · Answer

Why not keep track of the state of through a class without CSS rules on the clickable anchor itself    function             show-background   click function                  content-area   animate  opacity   toggle     slow                show-background   toggleClass  clicked            if       show-background   hasClass  clicked                     this  text  Show Text                      else                 this  text  Show Background

User · Answer

The most beautiful answer is    Extend jQuery with this function       fn extend       toggleText  function a  b           return this text this text      b   a   b               HTML    lt button class  example  gt  Initial  lt  button gt    Use        example   toggleText  Initial    Secondary      I ve used the logic   x    b   a   b   in the case that the initial HTML text is slightly different  an extra space  period  etc     so you ll never get a duplicate showing of the intended initial value    Also why I purposely left spaces in the HTML example  -    Another possibility for HTML toggle use brought to my attention by Meules  below  is     fn extend           toggleHtml  function a  b               return this html this html      b   a   b                       HTML    lt div gt John Doe was an unknown  lt button id  readmore john doe  gt  Read More     lt  button gt  lt  div gt    Use       readmore john doe   click   toggleHtml       Read More            Until they found his real name was  lt strong gt Doe John lt  strong gt           or something like this

User · Answer

this is not the very clean and smart way but its very easy to understand and use somtimes - its like odd and even - boolean like     var moreOrLess   2         Btn   on  click  function          if moreOrLess   2    0             this  text  text1            moreOrLess            else            this  text  more             moreOrLess

User · Answer

Improving and Simplifying  Nate s answer   jQuery fn extend       toggleText  function  a  b           var that   this              if  that text      a  amp  amp  that text      b                   that text a                             else             if  that text      a                   that text b                             else             if  that text      b                   that text a                         return this              Use as       YourElementId   toggleText  After    Before

User · Answer

In most cases you would have more complex behavior tied to your click event  For example a link that toggles visibility of some element  in which case you would want to swap link text from  Show Details  to  Hide Details  in addition to other behavior   In that case this would be a preferred solution     fn extend     toggleText  function  a  b       if  this text      a   this text b         else   this text a             You could use it this way     document  on  click     toggle-details   function e     e preventDefault        other things happening     this  toggleText  Show Details    Hide Details

User · Answer

Modifying my answer from your other question  I would do this     function          show-background   click function        var c       content-area      var o    c css  opacity      0    1   0    var t    o  1     Show Background     Show Text     c animate  opacity  o    slow        this  text t

User · Answer

I ve written my own little extension for toggleText  It may come in handy   Fiddle  https   jsfiddle net b5u14L5o   jQuery Extension   jQuery fn extend       toggleText  function stateOne  stateTwo            return this each function                 stateTwo   stateTwo                      this  text       stateTwo  amp  amp  stateOne     this  text stateTwo                                                          this  text stateOne                             Usage         lt button gt Unknown lt  button gt        ------- BEGIN e g  1 -------   Initial button text is   Unknown     button   on  click   function           this  toggleText  Show    Hide       Hide  Show  Hide     and so on        ------- END e g  1 -------    ------- BEGIN e g  2 -------   Initial button text is   Unknown     button   on  click   function           this  toggleText  Unknown    Hide       Hide  Unknown  Hide           ------- END e g  2 -------    ------- BEGIN e g  3 -------   Initial button text is   Unknown     button   on  click   function           this  toggleText       Unknown  Unknown  Unknown           ------- END e g 3 -------    ------- BEGIN e g 4 -------   Initial button text is   Unknown     button   on  click   function           this  toggleText  Show           Show               ------- END e g 4 -------

User · Answer

function             show-background   click function                  content-area   animate  opacity   toggle     slow                  var text       show-background   text            show-background   text          text     Show Background     Show Text     Show Background          Toggle hides or shows elements  You could achieve the same effect using toggle by having 2 links and toggling them when either is clicked

[jquery] jQuery Toggle Text?

Examples related to jquery

Examples related to toggle