Stop Button Text Changing on All Buttons

Question

$('.entry-content #toggle').click(function() {

var elem = $('#toggle').text();

if (elem == 'Read More') {

$('.entry #toggle').text('Read Less');

} else {

$('.entry #toggle').text('Read More'); 

}

});

This jQuery changes the button text on all buttons on each article on the archive page. I only want it to change the button which is clicked.

<div id="toggle" class="btn">Read More</div>

<div class="text" />

Update 1 : I only want to add the button if there's 2 or more paragraphs. I assume i can use .after some how.

Update 2 :

$('#toggle').click(function() {

$(this).closest('.post').find('.text').slideToggle();

$(this).text(function( i, v ) {

   return v === 'Read More' ? 'Read Less' : 'Read More'


      });
});

ID should be unique on context – guradio Sep 28 '17 at 03:27 — guradio, Sep 28 '17 at 03:27

dvr · Accepted Answer · 2017-09-28T03:32:58.063

1

Reference your own button inside the event.

$('.entry-content #toggle').click(function() {

var elem = $(this).text();

if (elem == 'Read More') {

$(this).text('Read Less');

} else {

$(this).text('Read More'); 

}

});

Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

edited Sep 28 '17 at 03:32

answered Sep 28 '17 at 03:26

dvr

885
5
20

Wish i understood jQuery like you Diego . I've spent 2 days trying to learn. Thank you very much. – Dev Sep 28 '17 at 03:31
Glad i could help, and keep learning! JS is an awesome puzzle to work with! – dvr Sep 28 '17 at 03:33
Just 1 more question if you have time please. I only want to add the button if there's 2 or more paragraphs. I assume i can use .after some how. – Dev Sep 28 '17 at 03:45
You could use the length of your text or you can dig into this question https://stackoverflow.com/questions/3336264/paragraphs-in-javascript – dvr Sep 28 '17 at 03:51

score 1 · Answer 2 · answered Sep 28 '17 at 03:30

$('#toggle').click(function() {

    var elem = $(this).text();

    if (elem == 'Read More') {
        $(this).text('Read Less');
    } else {
        $(this).text('Read More'); 
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="btn">Read More</div>

<div class="text" />

score 1 · Answer 3 · answered Sep 28 '17 at 03:59

1

Simplified code.

$('#toggle').click(function() {
    $(this).text(function(i, v){
       return v === 'Read More' ? 'Read Less' : 'Read More'
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle" class="btn">Read More</div>

<div class="text" />

answered Sep 28 '17 at 03:59

Could you use that with .slideUp(); and .slideDown(); – Dev Sep 28 '17 at 04:09

Stop Button Text Changing on All Buttons

3 Answers3