How do I get the link text value to toggle using jQuery?

Question

I have a large block of text with half of the text hidden. I'm using a Bootstrap 5x toggle to show and hide the block of text. This works fine.

However, I am also trying to change the button text from Show more to Show less when the toggle takes place. I have some jQuery that should work but it is not. The text does not change from Show more to Show less.

Here is the Toggle code:

<div class="collapse more-collapse" id="moreContent{sub_topic:entry_id}">
    {sub_topic:more_text}
</div>
<p><a class="red more-toggler custom-toggler me-4" data-bs-toggle="collapse" data-bs-target="#moreContent{sub_topic:entry_id}" aria-controls="moreContent" aria-expanded="false" aria-label="Toggle more-content">
Show <span>more</span><span class="hidden">less</span> &#8250;</a></p>

And here is the jQuery (running jQuery 3.7.1):

$(document).ready(function() {
    $('.hidden').removeClass('hidden').hide();
    $('.toggle-text').click(function() {
    $(this).find('span').each(function() { $(this).toggle(); });
    });
});

Musa · Accepted Answer · 2024-02-11 05:07:53Z

1

Your selector may be wrong, I don't see any .toggle-text in you mark up.
Below I used .custom-toggler from the anchor tag to set the click event handler.

$(document).ready(function() {
    $('.hidden').removeClass('hidden').hide();
    $('.custom-toggler').click(function() {
        $(this).find('span').toggle(); 
        $(this).parent().prev().toggleClass('collapse');
    });
});

.collapse{
    height: 1em;
    overflow: hidden;
}
[id^=moreContent]{
   white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="collapse more-collapse" id="moreContent{sub_topic:entry_id}">What do they got? A lot of sand
We got a hot crustacean band
Each little clam here
Know how to jam here
Under the sea
Each little slug here
Cuttin' a rug here
Under the sea
Each little snail here
Know how to wail here
That's why it's hotter
Under the water
Ya we in luck here
Down in the muck here
Under the sea
</div>
<p><a class="red more-toggler custom-toggler me-4" data-bs-toggle="collapse" data-bs-target="#moreContent{sub_topic:entry_id}" aria-controls="moreContent" aria-expanded="false" aria-label="Toggle more-content">
Show <span>more</span><span class="hidden">less</span> &#8250;</a></p>

answered Feb 11, 2024 at 5:07

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

1 Comment

forrest Over a year ago

Musa, thank you for the extra set of eyes on this. I had looked it over so many times I missed the obvious. Everything is working correctly now.

Collectives™ on Stack Overflow

How do I get the link text value to toggle using jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related