Exercise Solution: Show, Hide and Toggle

1. Insert a Welcome Message Top ↑

$( "#display1" ).text(
    "Welcome to plus2net.com"
);

2. Style Two Divs Together Top ↑

$( "#display2, #display3" ).css(
    "background-color",
    "yellow"
);

3. Separate Show and Hide Buttons Top ↑

$( "#my_b1" ).on( "click", function () {
    $( "#display4" ).show();
});

$( "#my_b2" ).on( "click", function () {
    $( "#display4" ).hide();
});

4. Toggle with One Button Top ↑

$( "#my_b3" ).on( "click", function () {
    $( "#display5" ).toggle();
});

5. Display a Name Top ↑

$( "#my_b6" ).on( "click", function () {
    $( "#display6" ).text(
        "plus2net.com"
    );
});

show()/hide() · toggle()

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<div id=display1></div>


<script>
$(document).ready(function() {
 $("#display1").html('Welcome to plus2net.com');
})
</script>

Original example 2

<div id=display2> First Div with id=display2</div>
<div id=display3> Second Div with id=display3</div>

<script>
$(document).ready(function() {
 $("#display2,#display3").css("background-color", "yellow");
})
</script>

Original example 3

<button type='button'  id=my_b1>Show</button>
<button type='button'  id=my_b2>Hide</button>
<div id=display4> Welcome to plus2net </div>

Original example 4

<script>
$(document).ready(function() {

$("#my_b1").click(function(){
$("#display4").show();
})

$("#my_b2").click(function(){
$("#display4").hide();
})

})
</script>

Original example 5

<button type='button'  id=my_b3>Show & Hide</button>  
<div id=display5> Welcome to plus2net </div>

Original example 6

<script>
$(document).ready(function() {
$("#my_b3").click(function(){
 $("#display5").toggle();
})
})
</script>

Original example 7

<button type='button' id=my_b6>Your Name?</button>  
<div id=display6></div>

Original example 8

<script>
$(document).ready(function() {
$("#my_b6").click(function(){
$("#display6").html('plus2net.com');
})
})
</script>

Additional Original Learning Routes Top ↑

• ../templates/custom.css

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: