Toggle Text With jQuery from css-tricks.com

Question

I can't get the following code to work that I copied from https://css-tricks.com/snippets/jquery/toggle-text/.

Can you also explain the purpose of ':visible'. Thanks.

Here's the fiddle and the code is copied below.

HTML:

<button id="more-less-options-button">more options</button>

JS

    $("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

Saurabh · Accepted Answer · 2015-03-22 03:11:37Z

2

:visible looks for the element in html page with id extra-options but you don't have any.

I think you are looking for this: http://jsfiddle.net/g6r0c8j5/1/

answered Mar 22, 2015 at 3:11

Saurabh

4393 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akshay · Accepted Answer · 2015-03-22 03:06:47Z

0

I created a span with id extra-options and now it works. Jquery checks if the content with id extra-options is visible if visible change the text and hide the extra-options

$("#more-less-options-button").click(function() {
  
    var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="more-less-options-button">more options</button>
<span id="extra-options">Text</span>

answered Mar 22, 2015 at 3:06

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

3 Comments

Danny Over a year ago

Thank you. How would I modify the code to remove span ? I don't need the span. Just need the button to change its text when I push the button.

Akshay Over a year ago

@Danny I don't exactly know how to edit this however i can give you a new one'

Danny Over a year ago

Thanks. Can you create an alternate using .toggle() and the var txt? (Not the deprecated version of .toggle().)

whaley · Accepted Answer · 2015-03-22 03:12:49Z

0

You don't have the #extra-options in the HTML.

Here's a fork of your jsfiddle.

Visible checks to see if the div is open or not, and the text changes accordingly.

edited Mar 22, 2015 at 3:12

answered Mar 22, 2015 at 3:07

whaley

6555 silver badges14 bronze badges

Collectives™ on Stack Overflow

Toggle Text With jQuery from css-tricks.com

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related