***SOLVED***Read More/Less Script for Cards

[scribeman01]

Is there a way to add a "Read More/Less Script" to a Card? https://codepen.io/qiaoli116/pen/MqNObm Thanks!

[Pablo]

There is no standard solution for cards, as they are generally considered 'lightweight' components. Incorporating advanced scripts by default would significantly increase their complexity and deviate from their intended purpose.

However, if you have programming knowledge, you can customize and enhance them to meet your specific requirements.

Or else this may be helpful:
https://www.wysiwygwebbuilder.com/suppo ... inter.html

[onlye]

I know this is not exactly what you are looking for, but you can collapse the card so only the header shows. Then users can expand the card. This option is available in the card settings dialog.
Here is a sample I created when testing the idea to show an account:
https://onlye.org/postweb/cards/index.html

[BaconFries]

For me your example doesn't work. But see the following example from w3schools.
https://www.w3schools.com/howto/tryit.a ... _read_more

[scribeman01]

Thank you B&F for the script. Unfortunately, I'm striking out trying to get this to work on the card.
https://www.w3schools.com/howto/tryit.a ... _read_more

The best I can do is "add HTML" in the card object and it shows as the last item with all the HTML code embedded but previews - doesn't work though. I've also tried to insert HTML via the Page HTML and can't get it to work either - - no matter if I insert between, before/after "body", between HTML, after/before page etc. Some time ago, I had successfully added a state dropdown in one of the forms but am in the dark here. Here's my link: https://drive.google.com/drive/folders/ ... drive_link

Thank You

[scribeman01]

Thank you Onlye for the sample and suggestion. This is also a viable option between your suggestion & B&F's. I can't find the collapsible options in any of the card settings that matches the collapsible card option from the Version 16 enhancements - https://www.wysiwygwebbuilder.com/support/wb16.html . Scroll about 1/2 way down. I wanted to insert jpeg screen shots of it but don't see how I can do that here. Thanks!

[scribeman01]

That's a cool template Pablo! I'm not a programmer and can (on a very limited basis) understand very simple, fundamental html editing. I do peruse your extensions, customized objects, etc. as I teach myself thru your tutorials and videos. I'm pursuing B&F and Onlye's suggestions - either one should work. Thank you Sir!

[crispy68]

@Scribeman,

The card option Onlye spoke about is called 'Portlets'. However, version 16 does not have this option. You would need to upgrade WB to the latest version to get that as an option.

I looked at your set up and the code you entered is not correct. In the HTML portion of the card, you want to enter the code that will appear in the body only. Javascript and CSS code should be placed in either HTML boxes or in the page HTML to make it work and the HTML and BODY tags should be removed.

To make it work, do the following:

1. In the HTML in the card add only the following:

Code: Select all

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

2. Open up the page HTML and choose 'Before </body>' tag and enter the script portion:

Code: Select all

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

3. Open up the Page HTML and choose 'Between the <head></head> tags' and enter the following:

Code: Select all

<style>
#more {display: none;}
#Card2-card-item3{color:#000;font-family:arial;font-size:14px;}
</style>

In step 3, I had to add the #Card2-card-item3 ID because currently the CSS code for what you are adding doesn't have any CSS to style the text which is why you don't see it. You can change the color, font and size to whatever you want. I got the ID by right clicking on the card and choosing 'Object Html' from the context menu, you can see that the html code entered in the card has this ID.

[scribeman01]

Thank you CRISPY! Thank you for your time & efforts with the code which is certainly out of my realm! I re-uploaded for you to see that we're really very close. The only lingering issue is that I can't get the "More/Less" button link to maximize or minimize the text as I've tried to add more copy. I removed the header in the content but left the tags in the HTML script so you could see where I removed it. There is text copy that you inserted that I just changed the typing so you could differentiate that from the text which is appearing in the body that I can't get to maximize or minimize. Perhaps, I'm confused if text should be included with the HTML script added in the card as you had me do, and/or if I'm confusing how to enter the text. I so happy we're knocking on the door with this and this greatly helps me to better understand where HTML, body, CSS commands are entered - so want to understand that better also!

https://drive.google.com/drive/folders/ ... ?usp=drive_link

[crispy68]

I found 2 issues with your new set up:

1. In the Page HTML, you placed the script in the "start of Page" section. This needs removed as this will cause errors.

2. The CSS code for the text is incorrect. Click on the "Between <head></head> tags" of the Page HTML. You have:

Code: Select all

#Card2-card-item3{color:#000;font-family:arial;font-size:14px;}

and it needs to be:

Code: Select all

#Card1-card-item4{color:#000;font-family:arial;font-size:14px;}

The above code will change depending on the ID of the card and where it is placed within the card. Follow the steps in #3 in my last post to obtain the correct ID. This will be unique for each card you add it to. If you add this to multiple cards, you will need to add each ID.

[scribeman01]

https://drive.google.com/drive/folders/ ... drive_link

Yes Crispy 68, it's working for the one. I have used the "Object HTML" to identify the card (which is "Card1). When I duplicated Card 1, I confirmed that the duplicated card is now known as "Card2". The problem is, that when I click on the Read More/Less tab, the Card2 is controlling the Card1. When I dragged a new card in from the side, when I went thru the steps, inserting the header script - changing to to "Card2" then changed the original setting to "Card1." It does not seem I can duplicate the first card and make the ID tweaks for each unique card, or otherwise, I'm doing something wrong. Still making progress though. Reloaded latest sample that shows the issue. THANKS AGAIN!

[crispy68]

You cant use the same ID's for multiple cards which is why you are experiencing the issues have. The script would need to be altered to use classes versus ID's.

[BaconFries]

As crispy68 reply the reason why this is happening is due to the script and the same button ID being used which fires the same event for all buttons. This requires the script to be changed. I haven't tested the following. Note the line of code that use myBtn, myBtn1 this refers to each button ID this may differ to your own and should be changed relatively to match.

Code: Select all

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.querySelectorAll("myBtn, myBtn1");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

[scribeman01]

Thank you Crispy, unless I'm reading it wrong, I had separate ID's for both listings - Card1 & Card2. Looking at what B&F wrote about the script only referring to the one button which I think I understand that part. What I'm trying to understand if the additional buttons are added, how does each separate card still know which button to use if this is universal script? Is this where "class" comes into the picture?

[crispy68]

The button and text is using ID's and the script is looking for 1 ID. However, each card will have to have unique ID's for the text and button. So the script will need to be rewritten to be able to handle multiple buttons and text on the page. As is, it will not work for more than 1 instance.

[wwonderfull]

Thank you Crispy, unless I'm reading it wrong, I had separate ID's for both listings - Card1 & Card2. Looking at what B&F wrote about the script only referring to the one button which I think I understand that part. What I'm trying to understand if the additional buttons are added, how does each separate card still know which button to use if this is universal script? Is this where "class" comes into the picture?

The universal scripts may work something like this. One code but works for all and every card. Although rarely asked but did an experiment.

[scribeman01]

1) Yes, wwonderfull, that's EXACTLY what I'm after!
2) One step closer Crispy, but still can't get the 2nd card button to not go to the first, HOWEVER, in preview, I was able to duplicate "Card2" like "Card1". A) I added the same header description for "Card2"

Code: Select all

<style>
#more {display: none;}
#Card1-card-item4{color:#000;font-family:arial;font-size:14px;}
</style>
<style>
#more {display: none;}
#Card2-card-item4{color:#000;font-family:arial;font-size:14px;}
</style>

B. In the script, I changed "myBtn" & "myBtn1" to "myBtn1' & "MyBtn2" respectfully. I did this so I can parallel each button numeral with
"Card1" and "Card2" . . .

Code: Select all

 var btnText = document.querySelectorAll("myBtn, myBtn1");

C. Subsequently, these are now the HTML edits in Card1 & Card2 respectively:

Code: Select all

<h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more"><h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn1">Read more</button>

. . . subsequently, the id for Card 2 is changed to . . . [code]<h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn2">Read more</button>

What am I missing that still doesn't trigger that 2nd button?

So close!

https://drive.google.com/drive/folders/ ... drive_link

[crispy68]

@wwonderfull,
Do you have the changed code to share for this?

[scribeman01]

Yes, I did document that in my last post - the different tweaks. You're not seeing it? I uploaded the latest one with this link on Google Drive . . .
https://drive.google.com/drive/folders/ ... drive_link

I am copying this information that includes the code modifications. How do I give you a direct link to my last post? Anyway, I'm copying & pasting what was in my last post which includes the code modifications. Am I using the code annotation correctly to show you that? I see it after it was sent. Again, I'm still a "half a buck" short on just controlling the button.

****************

"1) Yes, wwonderfull, that's EXACTLY what I'm after!
2) One step closer Crispy, but still can't get the 2nd card button to not go to the first, HOWEVER, in preview, I was able to duplicate "Card2" like "Card1". A) I added the same header description for "Card2"

Code: Select all

<style>
#more {display: none;}
#Card1-card-item4{color:#000;font-family:arial;font-size:14px;}
</style>
<style>
#more {display: none;}
#Card2-card-item4{color:#000;font-family:arial;font-size:14px;}
</style>

B. In the script, I changed "myBtn" & "myBtn1" to "myBtn1' & "MyBtn2" respectfully. I did this so I can parallel each button numeral with
"Card1" and "Card2" . . .

Code: Select all

 var btnText = document.querySelectorAll("myBtn, myBtn1");

C. Subsequently, these are now the HTML edits in Card1 & Card2 respectively:

Code: Select all

<h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more"><h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn1">Read more</button>

. . . subsequently, the id for Card 2 is changed to . . . [code]<h2></h2>
<p>Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines. Expanded lines.  <span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn2">Read more</button>

What am I missing that still doesn't trigger that 2nd button?

So close!"

***end of pasted copy from last post. *****

[crispy68]

@scribeman,
My last post was for Wonderfull who had previously posted and not your last post.

[crispy68]

@scribeman,
I have it working with some code changes. Here is your project with the changes to page 1.
https://webbuildertemplates.com/downloa ... Pfffgg.wbs

There were some changes to the CSS (optimized), JS and the code entered into the card. There may be other ways to accomplish this that may be better but it works.

In addition, I created a free Read More using CSS only extension a while back here. I played around with it to make it work with cards like you are wanting. If you would like to test it out, reach out to me via ron@wizbangwebdesign.com and I can send you the extension to test and a sample project using your project.

[wwonderfull]

@wwonderfull,
Do you have the changed code to share for this?

I could not change the codes provided here the cards need some classes for sure, or else script will not work. It was from a collection I had which needed tweaks. I was thinking of making an extension out of it but I think it still needs tweaks to make sure it does not conflict with other codes. So needs more testing.

[Markoc]

I've been trying the extension Crispy68 made and It works well for but one thing. The text disappears when I go below 1500 pixels. All my pages are set for 1500 width. I view the pages on a monitor that's 2560 wide and they show fine. When I test in responsive mode the text shows until I get to 1500 pixels, then the text disappears. Any ideas how to fix this glitch?
Thanks,
Mark

[BaconFries]

@Markoc How is this related to the OP question(s) if you have any questions regarding the extension created by crispy68 (Ron) can you please contact him directly on its use. Thanks.

[Markoc]

Sure will. I was about to take it down anyway as I figured out the problem. I'll remember for next time

[crispy68]

@Markoc,

If you are having an issue with the extension I created please reach out to me at ron@wizbangwebdesign.com. I'll be happy to help.