help with showing and hiding trigger...
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?
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?
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
Frank
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
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
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
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
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
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
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 -
Frank
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";
}
if (this.innerHTML !== "Read more") {
this.innerHTML = "Read more";
mb.style.display = "none";
}
else {
this.innerHTML = "Read less";
mb.style.display = "block";
}
Frank
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
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
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.)
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.)
Bootstrap 5 CSS Grid.
Thanks so much Twinstream. This sends like a rather elegant solution.
Jim Capraro
Jim Capraro
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.