You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
4 years ago
|
<html>
|
||
|
|
<body class="checked">
|
||
|
|
|
||
|
|
<p>Is this a sentence
|
||
|
|
<span class="fpunct">
|
||
|
|
<span class="question">?</span><span class="bang">!</span>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||
|
|
|
||
|
|
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||
|
|
|
||
|
|
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||
|
|
|
||
|
|
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||
|
|
|
||
|
|
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.fpunct {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
/* fpunct "normal" */
|
||
|
|
.fpunct .question { display: inline; }
|
||
|
|
.fpunct .bang { display: none; }
|
||
|
|
/* fpunct "flipped" state */
|
||
|
|
.fpunct.flipped .question { display: none; }
|
||
|
|
.fpunct.flipped .bang { display: inline; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
Array.from(document.querySelectorAll(".fpunct")).forEach(function(punct) {
|
||
|
|
punct.addEventListener("click", function (e) {
|
||
|
|
console.log("fpunct CLICK, toggling", punct);
|
||
|
|
punct.classList.toggle("flipped");
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|