在Squarespace博客上创建READ MORE函数

时间:2019-05-08 19:17:35

标签: javascript css

我正在尝试在博客上创建READ MORE函数,例如this

此示例中的代码在实现到我的布局中时可以使用,但是问题是我不能再使用Squarespace编辑器在显示行下方创建任何内容。我必须手动编写所有代码,这在大量博客上是不值得的。

还有其他方法吗?也许在页面下方使用另一个div并显示两者之间的所有内容?

谢谢。

摘要:

function hideReadMore() {
  document.getElementById('readmoretext').className = 'visiblediv';
  document.getElementById('readmorebutton').className = 'hiddendiv';

}
.visiblediv {
  display: block;
}

.hiddendiv {
  display: none;
}

.readmorediv {
  width: 200px;
  margin: 0 auto;
}

.readmorebutton {
  width: 100%;
  height: auto;
  padding: 0px;
  background-color: #fff;
  border: 1px solid black;
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 2.75em;
  font-weight: bold;
  font-style: b;
  color: #f1592a;
  text-transform: uppercase !important;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  margin-top: 25px;
}
<p>This is sample text to represent a paragraph.</p>
<div class="readmorediv"><button id="readmorebutton" class="readmorebutton" onclick="hideReadMore()">Keep Reading</button></div>

<div id="readmoretext" class="hiddendiv">This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the
  button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent
  additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This
  is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button
  has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent
  additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. This
  is more sample text to represent additional text after the button has expanded the text. This is more sample text to represent additional text after the button has expanded the text. </div>

0 个答案:

没有答案