JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div id="1">
    My Content 1
</div>

<div id="2" style="display:none;">
    My Dynamic Content
</div>

<div id="static" style="display:none;">
    My Static Content
</div>
<input onclick="change()" type="button" value="Open Curtain" id="btnClick" />
<button id="btnClick1" type="button" value="2">Day 2!</button>
<button id="btnClick2" type="button" value="3">Day 3!</button>
<button id="btnClick3" type="button" value="4">Day 4!</button>
<button id="btnClick4" type="button" value="5">Day 5!</button>

JavaScript

/*
jQuery event that triggers when the button is pressed
# is an ID jQuery selector, usage:#anyElementId
*/
$('#btnClick').on('click',function(){
    if($('#btnClick').innerHTML=="Open Curtain"){
    $('#btnClick').innerHTML="Close Curtain";
    }
/*
In CSS, you can check if an element is visible by checking if the property display value is different from none, because if it's value is none, it will not be visible
*/
    if($('#1').css('display')!='none'){
/*    
So, if div 1 is visible, the condition will be true
*/
    $('#2').html($('#static').html()).show().siblings('div').hide();
        
/*
When you use it with parameter, example:
.html('<div><b>Any</b> plain text or HTML you want here.</div>')
It set the element HTML to whatever you put on it's parameter

When you use the method .html() without parameter, it returns the element HTML, so by using $('#static').html(), it will return the HTML from the DIV with ID static.

So I'm setting the DIV 2 HTML to whatever is static HTML

Right after setting the HTML, I use .show() to show div 2, and right after that I use .siblings('div').hide(), to hide any DIV siblings of the one I've just have showed up.

In jQuery, you can use methods to run synchronously, concatenating them with dots, example:
$('#div1').show().siblings('div').hide();

In this example it will show #div1 then right after that search for it div siblings and hide them.
*/
    }else if($('#2').css('display')!='none'){
/*    
Condition to check if DIV 2 is visible
*/
        $('#1').show().siblings('div').hide();
/*    
If it is, it will show DIV 1 and right after that will search for it siblings and hide them with .siblings('div').hide();
*/
    }
});


function change()
{
    document.getElementById("btnClick").value="Close Curtain"; 
}