Share
Report
14This 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.
Categories:
I have the same question (0)
All responses (
Answers (
