Hi, I am trying to add a “show more / show less” button into a Text area callback from user input like this example:
show more show less example
Do we have this feature built into wappler or do I need to add the java and css manually ?
thank you in advance for the help.
A textarea doesn’t seem like the right place for more/less.
There are so many ways to achieve this dependent on the dataset being shown - If you’re using p tags to show content, perhaps previously captured via a textarea, then the code you’ve shared looks fine and can be re-used in Wappler using the same JS/CSS or simply using Bootstrap dynamic attributes (Show)
Hello friend, if I can help you, watch this video, it’s in Portuguese, but I think it can help
You could try this tutorial. Worked for me.
https://community.wappler.io/t/toggle-any-element-visibility/3882
What amazing community wappler has with everyone willing to help.
Thanks @AdrianoLuiz I am actually portuguese so this is perfect
Thanks @web-works but I am trying to make half text visible and the other half with a toggle.
Thanks @scalaris I will try it, my only doubt is how to divide the dynamic text in two !
.substr(0, 20)
First 20 chars of a string
Ok, is half done !! this is what I managed to do so far but I know still some work to be done:
Description: Lorem Ipsum is simply
<span id="show-more" dmx-on:click="show_more.setValue(1)" dmx-hide="show_more.value==1" style="cursor: pointer;">Show more</span>
<span id="show-more-content" dmx-show="show_more.value==1">
<p class="font_10 mb-1"> text of the printing and typesetting industry</p>
</span>
<span dmx-hide="show_more.value==0" dmx-on:click="show_more.setValue(0)" id="show-less" style="cursor: pointer;" class="showless">Show less</span>
Now the issue is where to add the “.substr(0, 20)”
and I want to alight the “show more” “show less” to the right side in small grayed out letters !
Thanks once more to all
If your text is static then you don’t need substring(). Just split it into two sections. Otherwise it’s as follows
{{text.substring(0,50)}}
{{text.substring(50)}}’
…current_user_info.description.substring(0, 50)
