Last active
June 17, 2024 05:22
-
-
Save stephpolinar/1c6d31c7571a0cc28abd215f25367305 to your computer and use it in GitHub Desktop.
A version of implementing a "Read more" button in collection descriptions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This is assuming that the paragraphs you want to truncate are enclosed in a span tag with ID="more" | |
(e.g. <span id="more"></span>) | |
--> | |
<!-- CSS --> | |
<style> | |
#more { | |
display: none; | |
} | |
</style> | |
<!-- Placed under the collection description --> | |
<button class="read-more-btn" onclick="readMore()">Read more</button> | |
<!-- Placed at the end of the document (before schema) --> | |
<script type="text/javascript"> | |
let desc = `{{ collection.description }}`; | |
let moreBtn = document.querySelector('.read-more-btn'); | |
let moreTxt = document.querySelector('#more'); | |
//check if span tag for more section is present | |
if(desc.includes('<span id="more">')){ | |
moreBtn.style.display = 'block'; | |
} else { | |
moreBtn.style.display = 'none'; | |
} | |
function readMore() { | |
if(moreTxt.style.display === "inline"){ | |
moreBtn.innerHTML = "Read more"; | |
moreTxt.style.display = "none"; | |
} else { | |
moreBtn.innerHTML = "Read less"; | |
moreTxt.style.display = "inline"; | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment