How to change button text toggle visibility

I Need Help
1

When using a text link or button to toggle visibility the contents of the link/button do not change when the bloc it triggers become visible on click.

How can this be done in blocs?

So if there is a list of 10 things. 3 are shown. You click on “View more” and are shown the full 10 items and that button text changed from “View more” to “View less”

:thinking:

3

I just worked it out.

I forget about using the toggle visibility feature all together.

Instead I added ‘.collapse’ to the div I wanted to show/hide.

I then added a custom attribute to the link to toggle it (‘data-toggle-secondary’)

Here’s the code I am using I got online…

<script>

$(‘[data-toggle-secondary]’).each(function() {
var $toggle = $(this);
var originalText = $toggle.text();
var secondaryText = $toggle.data(‘toggle-secondary’);
var $target = $($toggle.attr(‘href’));

$target.on('show.bs.collapse hide.bs.collapse', function() {
    if ($toggle.text() == originalText) {
        $toggle.text(secondaryText);
    } else {
        $toggle.text(originalText);
    }
});

});

source: