I just used the read more button from Ingers phantastic component shop = https://mock-up.coffeecup.com/f-comps/f-read-more.html
Now I want to use this same Component on the same page 4 times - but it will work only once and the copies will be renamed and the butto "read more" of the copy will open the button of the original ... I don't like to many class names - what is the most elegant way ??

Hi Mich cel
Well there is no getting around having to change or add a couple of class names and or ID's,

so

1/ duplicate the container "more-less-holder

2/ go to the class name for it, and delete it.... DO NOT DO ANYTHING ELSE except retype it as something (IE::: more-less-holder2

3/ move on down to the footer code and add a number to the myFunction JS code (IE:::: myFunction2)

4/ Because you duplicated the container the ID's for the buttons etc have been appended

so then change the ID in the function code to the new ID it should then look something like this"

<script>
function myFunction2() {
var dots = document.getElementById("dots-copy-1");
var moreText = document.getElementById("more-copy-1");
var btnText = document.getElementById("moreLess-copy-1");

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>

Go to the button which now has an ID of "moreLess-copy-1"

go to it's attributed and change it to

"myFunction2()"

change the paragraphs etc to your new words

Repeat as many times as you need, each time making those changes

Easy Peasy

Have A Great Day

W

I lost my internet just now so if that doen't make senxe ;at me know, I tried to save it before )

Puh - this is higher school for me - I never would have found it on my own ... thanks a lot - IT IS WORKING !!!
I really can use this feature - people don't like to have to much text on the first view but like this they can decide themselves...

There are other ways some of which only use CSS, and just components from the components library, but still require a lot of twerking, one can even make it so they can close by clicking a READ LESS button but then yours is working now success.

W

Reading this with interest. I have almost decided to extend that component by including one more paragraph with a 'Read more/less' button, just to show what has to be done if there are more of them.

That would really be a great idea.
I myself just try to make kind of text gallery with "read more" buttons. Each gallery item with a title + the more-less holder - so people decide, what they want to know more detailed. Only text, no pictures.
I use the content/Element 2-4 Columns (CSS grid) - and even if Wayans way now - after I got it - is rather simple - I have to much respect concerning scripts --- so I would prefer a CSS way.

Hang in there,

I feel another video demo coming on, for the CSS way

by the way it isn't Wayans way that I did it's Ingers way, I just showed how to add more

Thanks Wayan - BTW I found that when I Preview the "more-less-holder" the drop down button is under the 3 dots behind the first text - but after opening and closing the following text the drop down button will be besides the 3 doits.
Can that be from the beginning besides the dots ?

I have no idea, I just showed a way to make the component from Inger's component display and work multiple times on a page, I haven't delved into it to see how it works.