An option in the designer to change text of button on click

Bootstrap Studio Help
1

Bit of background to my issue:
I’m creating a cards with expandable text in a swiper. https://swiperjs.com/

My JS skills and knowledge aren’t that great (in fact they are very poor)!

I’m using a collapse component in the card to expand/collapse the text and I’m trying to use a button as a the ‘read more’ ‘read less’ toggle.


<div class="collapse-container">
        <button class="btn btn-link read-more-btn ${review.btnShowHide}" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="${review.collapse}" href="#${review.collapse}" data-text-swap="Read less">Read more</button>
        <div id="${review.collapse}" class="collapse">
          <p>${review.description}</p>
        </div>
      </div>

I’m using the fetch api to get content I’m storing in a json file and I’ve managed to create a script which generates the card(s) based off of the content in the json file and display it in the swiper component. this all works.

My issue:

The ‘read more’ ‘read less’ changing of the button text on click. I’m using this snippet stored in a script file:

$(function () {
$(‘.read-more-btn’).on(‘click’, function () {
var $this = $(this),
cValue = $this.text(),
nValue = $this.data(‘text-swap’);
$this.text(nValue).data(‘text-swap’, cValue);
});
});

and I’ve added data-text-swap=“Read less” to the button.

When I use the preview in BS, the text on the button changes and works. However when I export the project and deploy it, the code for the text change on the button no longer works even though I don’t get any errors in the console.

If I open up the project in VS code and use built in live previewer, it works fine!

Why would something which works in the previewers (BS and VS Code) not work when the project is deployed in netlify? Any advice would be much appreciated.

What with the amount of faff I’ve had just trying to get button text to change on click, it would be great if BS catered for this in the designer. The ability to change the text of a button on click.

2

I now have this working with this:

3 

benthomaselwell
1d
Bit of background to my issue:
I’m creating a cards with expandable text in a swiper. https://swiperjs.com/ 2

My JS skills and knowledge aren’t that great (in fact they are very poor)!

I’m using a collapse component in the card to expand/collapse the text and I’m trying to use a button as a the ‘read more’ ‘read less’ toggle.


<div class="collapse-container">
        <button class="btn btn-link read-more-btn ${review.btnShowHide}" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="${review.collapse}" href="#${review.collapse}" data-text-swap="Read less">Read more</button>
        <div id="${review.collapse}" class="collapse">
          <p>${review.description}</p>
        </div>
      </div>
I’m using the fetch api to get content I’m storing in a json file and I’ve managed to create a script which generates the card(s) based off of the content in the json file and display it in the swiper component. this all works.

My issue:

The ‘read more’ ‘read less’ changing of the button text on click. I’m using this snippet stored in a script file:

$(function () {
$(‘.read-more-btn’).on(‘click’, function () {
var $this = $(this),
cValue = $this.text(),
nValue = $this.data(‘text-swap’);
$this.text(nValue).data(‘text-swap’, cValue);
});

I guess this clears the console error if you convert to javascript.

document.addEventListener('DOMContentLoaded', function () {
    // Select all elements with the class 'read-more-btn' and add click event listeners to them
    document.querySelectorAll('.read-more-btn').forEach(function (button) {
        button.addEventListener('click', function () {
            // Get current text and the text to swap from the element
            var cValue = this.textContent;
            var nValue = this.getAttribute('data-text-swap');

            // Swap the text
            this.textContent = nValue;
            this.setAttribute('data-text-swap', cValue);
        });
    });
});
4

You can do it with CSS without javascript

.read-more-btn[aria-expanded=false]:after {
  content: 'Read more';
}

.read-more-btn[aria-expanded=true]:after {
  content: 'Read less';
}
5

Thank’s. If there’s a css way, I’d always rather use that :slight_smile: