JSFiddle - React, Tailwind, and code Playground

by jasonhsu

HTML

<div  id = "Block1">
    <span id = "hello1">ㄚㄚㄚ (按我)</span>
    <span id = "hello2" style="display:none;">ㄛㄛㄛ (按我)</span>
</div>

<br/>
    
<div  id = "Block2">
    <span id = "hello3">ㄛㄛㄛ(按我)</span>
    <span id = "hello4" style="display:none;">ㄚㄚㄚ (按我)</span>
</div>

CSS

#Block1, #Block2 { width:850px; border-collapse:collapse; } 
#hello1, #hello3{color:red;cursor:auto;}

JavaScript

// 版本一、自己判斷狀態
$("#Block1").click(function() {
     if ($("#hello1").is(":visible")) {
             $("#hello1").hide("slow"); 
             $("#hello2").show("slow");
    } else {
             $("#hello2").hide("slow");
             $("#hello1").show("slow");
    }
 });

// 版本二、使用 .toggle() 切換元件的 hide 與 show  
 $("#Block2").click(function() {
        $("#hello3").toggle("fast");
        $("#hello4").toggle("fast");
 });