Hi Can any one help me understand one only one of my html code blocks work on squarespace?
I have been able to have 2 markdown codes work on the same page, but with the HTML code it does not.
I have two post, same html code, just different content. The code is for a read more/read less button.
One works fine, but when I click on the other read more button it enables the first post to drop down instead of its own (second post).
This is the code below - from some reading i think i need to add an element within the code that allows both or work separately on the same page?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>CONTENT<span id="dots"></span><span id="more">eCONTENT.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>