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