切换div后更改文本

Question

How can I get the toggle to say Less Information when clicked? I tried using the::after prompt in css but couldn't get it working. I also want to style the 'Less Information' in css. Maybe I should make it call upon a class?

<div class="toggle">More Information</div>

$(document).ready(function(){
  $(".content").hide();

  $(".toggle").on("click", function(e){   
      $(this).next('.content').slideToggle(200); 

    });
});

Answer 1

Use .text() to replace the text inside the div .

Try this:

$(document).ready(function(){
  $(".content").hide();
  $(".toggle").on("click", function(){   
      $(this).next('.content').slideToggle(200);
      $(this).text($(this).text() == 'More Information' ? 'Less Information' : 'More Information');
    });
});

JSFiddle Demo

UPDATE

You could also use :visible to check if content is visible and change text accordingly.

$(document).ready(function () {
    $(".content").hide();
    $(".toggle").on("click", function () {
        var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
        $(".toggle").text(txt);
        $(this).next('.content').slideToggle(200);
    });
});

JSFiddle Demo

Answer 2

Could do like this: Demo http://jsfiddle.net/f1dmhf0d/

• API : .prev - http://api.jquery.com/prev/
• or could look into this: http://api.jquery.com/next-siblings-selector/

Detail safely assuming your content is above "more info" you can traverse through the dom and use :visible flag aa=ccordingly to change the text using .text

Hope rest fits your need. :)

code

$(document).ready(function () {
    $(".content").hide();

    $(".toggle").on("click", function (e) {

        var $this = $(this).prev('.content');
        var $text = $(this);
        $this.slideToggle('slow', function () {
            if ($(this).is(':visible')) {
                $text.text('less info');
            } else {
                $text.text('more info');
            }
        });

    });
});