[Resolved] Multiple See more/See less toggles – changing button label

Fair enough

For reference, and for anyone wanting to have relatively simple ‘See more’ and ‘See less’ (multiple) toggles, I started out with this thread. It worked for multiple toggles but it did not have any way of changing labels on toggle. This is the code I ended up with (it will need wrapping in <script> tags if not using something like Snippets or WPCodeBox):

document.querySelectorAll(".expand-section-button").forEach((item) => {
    item.addEventListener("click", (event) => {
        for (let i = 0; i < item.children.length; i++) {
            item.children[i].textContent =
                "More" == item.children[i].textContent ? "Less" : "More";
        }

        var placeholder = item.nextElementSibling;
        while (placeholder) {
            if (placeholder.classList.contains("expand-section-content")) {
                placeholder.classList.toggle("show-content");
                break;
            }

            placeholder = placeholder.nextElementSibling;
        }
    });
});

The custom CSS looks like this (last rule is optional if you don’t want to change cursor on hover):

.expand-section-content {
  display: none;
}

.expand-section-content.show-content {
  display: block;
}

.expand-section-button .gb-button {
	cursor: pointer;
}

The additional CSS Class expand-section-button gets added to the GB ‘Buttons’ wrapper, and the expand-section-content Class is applied to the content section/heading/div/whatever that you want to toggle visibility on. Styling on the button is set to no padding, no background colour, no border – it is, effectively, a plain text link.

Maybe this will be of use to someone else looking for simple toggles instead of accordions.

Cheers