<!--spoiler 🔽 -->
<script>
//1. Hide Spoiler
$(".spoilerx span").hide();
//2. Add a button
$(".spoilerx").append("<vir9>🔻 ...</vir9>"); // เดิม <button>🔻 ...</button> เปลี่ยนเพราะ ทำให้  button submit ค่า  ของ 90.20-core.php ไม่แสดง  ( ระวังตัวแปร ที่ชื่อซ้ำกันเช่น $x )
//3. when button pressed 
$("vir9").click(function(){ // เดิม  "button" or $(".spoilerx button").click(function(){
//3.1 show spoiler
$(this).prev().show();                  
//3.2 get rid of button  
$(this).remove();
});
</script>

<div class="spoilerx">
<span>ข้อความที่ซ่อน</span>
</div>

Glad to hear that you were able to fix the issue! It’s important to make sure that the selector matches the correct element so that the event handler is attached to the right element.

Regarding the use of the custom HTML tag <vir9>, please note that it’s not a valid HTML tag and may cause issues with accessibility and SEO. Instead, you can use a custom CSS class to style the button as desired and select it using the class name. For example:

<span class="spoilerx">
    <span class="spoiler-text">This is a spoiler!</span>
    <button class="spoiler-btn">Show spoiler</button>
</span>

<script>
$(".spoiler-text").hide();
$(".spoiler-btn").click(function(){
    $(this).prev(".spoiler-text").show();
    $(this).hide();
});
</script>

This code uses a custom class name .spoiler-btn to select the button element and .spoiler-text to select the spoiler text. The event handler shows the spoiler text and hides the button when it’s clicked. This approach is more semantic and accessible than using a custom HTML tag.