I have successfully developed a Google App Script that links to a Google Sheet serving as a database.
The application iterates through each row, and I showcase each column as part of an employee bio page entry.
- ex. Picture | Name | Title | Phone | Email | Bio
Currently, everything is being displayed accurately, but some bios are lengthy. To address this issue, I aim to truncate the bio text so that only four lines are shown on page load with the remaining content hidden. Subsequently, clicking on a "Read More" button will reveal the rest of the text.
Considering I am utilizing Bootstrap framework, Bootstrap Collapse appears to be a suitable solution. However, my attempt to implement it has resulted in only the first entry functioning properly because the IDs linked to the button and link are unique to that particular entry.
You can access a functional example of the directory here: https://script.google.com/macros/s/AKfycbyldNdLB7HyJvf6b1FPmyLgzsdzpWYZnCbZRj1-ojbUe5Km_dSvHoW6D43O4mZ3rLAW/exec
My plan is to utilize Boostrap Collapse and devise unique IDs for the Button and collapseID of each bio entry.
I attempted using this JSFiddle: https://jsfiddle.net/g4q5vp2f/1/ as reference, yet encountered difficulty concerning the absence of unique IDs for the
<p id="collapseExample"><a role="button" href="collapseExample" aria-controls="collapseExample">#module {
font-size: 1rem;
line-height: 1.5;
}
#module #collapseExample.collapse:not(.show) {
display: block;
height: 3rem;
overflow: hidden;
}
#module #collapseExample.collapsing {
height: 3rem;
}
#module a.collapsed::after {
content: '+ Show More';
}
#module a:not(.collapsed)::after {
content: '- Show Less';
}<div id="module" class="container">
<h3>Bacon Ipsum</h3>
<p class="collapse" id="collapseExample" aria-expanded="false">
Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
Short loin leberkas tenderloin ground round shank, brisket strip stake ham hock ham.
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
</div>Objective:
To iterate through each employee bio and enable the display/hide functionality for truncated bio text.