help with showing and hiding trigger...

User 2885601 Photo


Registered User
42 posts

I've created a landing page at http://econdevforumjax.net using Coffee Cup Site Designer v4.

A short way down from the top of the page I have a Feature Article which you can find here: http://econdevforumjax.net/#feature

The first have of the article is displayed and the second half is in a hidden dive container. There is a "Read more" button that triggers the display of the hidden second half of the article.

Here's where I need help. once someone clicks on the read more button and the rest of the article is visible I would like to replace the read more button with a "read less" button that, when clicked, toggles the display back to the closed state.

I've been trying to figure this out for a couple of days but can't seem to get it to work.

Can someone lend a hand?
User 379556 Photo


Registered User
1,533 posts

I have played around with toggling in Vanilla, using a tiny bit of javascript in the Attributes section below the Elements Tree. The attached barely-styled example may be helpful.

Frank
Attachments:
User 515127 Photo


Registered User
116 posts

I've done something similar by assigning a value to the button value=0, then in an on-click event for the button, the function you call tests the value. If it is 0, then it would change the value to 1 and changes the button's innerHTML to "Read Less". before changing the display property of the hidden div to block (or whatever appropriate). And, of course, if the value = 1 then you change it to 0, flip the innerHTML to "Read More", and reset the div display to none.

If you aren't familiar with changing element properties on the fly with Javascript - here's a good starting place.
https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Hope this helps!

Regards,
Gordon

User 2885601 Photo


Registered User
42 posts

Frank and Gordon,
Thanks so much. I think this should give me what I need. I'm on the road right now and won't be back in my office until Monday - I'll use your suggestion then.

Again, thank you,
Jim Capraro
User 2885601 Photo


Registered User
42 posts

Frank and Gordon - thanks for the help

I am SOOO close

Using getElementById I am able to get the "Read more" inner html to change to "Read less" when the hidden container is open. But I can't get "Read less" to revert back to "Read more" when one clicks on the button a second time to close the container.

You can see it here: http://econdevforumjax.net/#feature

I've named the button id "read-more-less-button"

Here's the code:
var rm = getElementById("read-more-less-button");
if (this.innerHTML !== "Read more") {
this.innerHTML = "Read less";
}
else {
this.innerHTML = "Read more";
}

The part after the "else statement doesn't seem to be working. Any suggestions on how to get the "Read less" to revert back to "Read more" on second click


User 379556 Photo


Registered User
1,533 posts

It seems that my code has been partly used, but in a different and far more complex context of data-toggle, a couple of aria controls, and the onclick attribute referring to the button itself. It may be it was that more complex context that was causing the original problem.

It is probably the result that is wanted rather than particular controls, and the easiest solution may therefore be to adapt the example given, i.e.
1. to give the extra paragraph an id (whatever will be used in the onclick attribute, e.g. 'more-blurb'), and making the setting for that id as Display > None.
2. to remove the button with its id, data-toggle, aria controls etc.;
3. to replace it with an SD text element (the text being 'Read more') styled as a button, so as not to have both an href and an onclick attribute;
4. to give that text element an onclick attribute with the value set as follows -

var mb = getElementById("more-blurb");
if (this.innerHTML !== "Read more") {
this.innerHTML = "Read more";
mb.style.display = "none";
}
else {
this.innerHTML = "Read less";
mb.style.display = "block";
}


Frank
User 2885601 Photo


Registered User
42 posts

Frank,
Thank you for your help and thanks also for your patience. I naively thought I could apply your code directly to the "data-toggle" configured button and ended up complicating the effort. Per your advice, I've removed that button and used text stylized as a button instead it works like a charm.

Again, thanks so very much. You can see it here: http://econdevforumjax.net/#feature

Jim Capraro
User 244626 Photo


Registered User
811 posts

Hello James,

You can use the data-toggle to target multiple elements along with creating dynamic classes. I think its the most powerful feature of Foundation 6 and SD4.

(Remember to not use any dashes in id's though as this will break the toggler when targeting multiple elements.)
Attachments:
Bootstrap 5 CSS Grid.
User 2885601 Photo


Registered User
42 posts

Thanks so much Twinstream. This sends like a rather elegant solution.
Jim Capraro
User 18402 Photo


Registered User
62 posts

Thanks Just what I was looking for

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.