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

[Mat]

Hello

Thanks to a few other Posts I’ve got the vanilla js solution working to have multiple ‘See more’ buttons working on a page:

document.querySelectorAll(".expand-section-button").forEach((item) => {
    item.addEventListener("click", (event) => {
        var placeholder = item.nextElementSibling;
        while (placeholder) {
            if (placeholder.classList.contains("expand-section-content")) {
                placeholder.classList.toggle("show-content");
                break;
            }

            placeholder = placeholder.previousElementSibling;
        }
    });
});

Above works fine to show/hide the desired div contents. What I’d like to be able to do is to have the Button label toggle between ‘See more’ and ‘See less’ according to whether div is expanded or not. I think I can see how to do this with a single Button ID, but there will be multiple buttons in this case.

The page linked to in private has two simple test links at the bottom of the content and it’s these links (button labels) that I’d like to change. Any help would be much appreciated. Thanks.

[Ying]

Hi Mat,

I’m sorry but this topic is not theme related and is beyond the scope of the theme support.

Please check this article for what’s included in GP Premium support:
https://generatepress.com/what-support-includes/

I would recommend posting this topic at websites like https://stackoverflow.com/

[Mat]

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

[Ying]

Thanks for sharing and glad you got it to work 🙂

[Author]

Posts