This is the code I am using to fetch data from a table and use it in a carousel.
<!-- Slideshow container -->
<div class="slideshow-container">
{% entitylist key: 'List of Testimonials' %}
{% entityview logical_name: 'Testimonials' name:'Active Testimonials', page_size:20 %}
{% for item in entityview.records %}
<div class="mySlides">
<div class="ui-layout" style="padding: 25px; margin:0 50px; border: 1px solid rgb(128, 128, 128); border-radius:25px; box-shadow: 0px 4px 8px 0px #BDBDBD; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<img src="{{item.cr271_testimonialpersonimage}}" style="border-radius: 50%; width: 50px; background-color: #fafafa; margin-left: auto; margin-right: auto;">
<h3 style="text-align: center;"> {{ item.cr271_testimonialpersonname }} </h3>
<p style="color: #848282; font-family: sans-serif; text-align: justify;"> {{ item.cr271_testimonialdescription }} </p><br>
<p id="readMore" style="color: blue; font-family: sans-serif; text-align: center; cursor: pointer;">Read More</p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="{{item.cr271_testimonialpersonimage}}" style="border-radius: 50%; width: 50px; background-color: #fafafa; margin-left: auto; margin-right: auto;">
<h3 style="text-align: center;"> {{ item.cr271_testimonialpersonname }} </h3>
<p style="color: #848282; font-family: sans-serif; text-align: justify;"> {{ item.cr271_testimonialdescription }} </p><br>
</div>
</div>
</div>
</div>
{% endfor %}
{% endentityview %}
{% endentitylist %}
<a class="prev" onclick="plusSlides(-1)" style="text-decoration: none;">❮</a>
<a class="next" onclick="plusSlides(1)" style="text-decoration: none;">❯</a>
</div>
What I want to do is show only 2 lines of the data fetched by {{item.cr271_testimonialdescription}}. If there are more lines, they will be hidden at first and there will be a Read More button. On clicking that button, the user can see the rest of the fetched data in a modal window. How can I do that?
Another problem with this code is the modal window is opening only for the first record fetched and not for the rest. Please help me with that as well.
14
Share
Report
All responses (
Answers (
