Jump to content

HTML code x2 on one page

Recommended Posts

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>

Link to comment
  • Replies 5
  • Views 697
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.