ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: handle no-js scenario for message buttons

Browse source
This commit is contained in:
Ayo 2024-01-16 13:21:09 +01:00
parent 0fd95b9461
commit b847b6dce5
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_includes/message.html
View file

@ -16,7 +16,7 @@
work. work.
</p> </p>
<div class="hide-message" style="display: none"> <div id="hide-message-btn" style="display: none">
<p> <p>
There may be some topics that pop up more than others. There may be some topics that pop up more than others.
<a href="/technology">Technology</a> posts are mostly about web <a href="/technology">Technology</a> posts are mostly about web
@ -41,16 +41,18 @@
<p>~ <em>Ayo Ayco</em></p> <p>~ <em>Ayo Ayco</em></p>
</div> </div>
<button <button
class="read-message" id="read-message-btn"
style="cursor: pointer" style="cursor: pointer; display: none"
onclick="toggleMessage()" onclick="toggleMessage()"
> >
Read the full message &raquo; Read the full message &raquo;
</button> </button>
<script> <script>
var x = document.getElementById("hide-message-btn");
var y = document.getElementById("read-message-btn");
y.style.display = "block"; // only show when JS enabled
function toggleMessage() { function toggleMessage() {
var x = document.getElementsByClassName("hide-message")[0];
var y = document.getElementsByClassName("read-message")[0];
if (x.style.display === "none") { if (x.style.display === "none") {
x.style.display = "block"; x.style.display = "block";
y.innerHTML = "&laquo; Read less..."; y.innerHTML = "&laquo; Read less...";