Issue with hiding and showing two divs using Jquery

Question

Issue with hiding and showing two divs using Jquery

Whenever the page is refreshed, I notice that my second <div> is displayed, which I would like to prevent.

$(function(){
    $("#div2").hide();
    $("button").click(function(){
        $("#div1").hide()
        $("#div2").fadeIn(1000)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
    <button id="button">Click</button>
    
  </div>
    
    
  <div id="div2">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

javascript jquery html css

Answer 1

Answer №1

Don't use the hide() function to conceal div2, utilize CSS instead.

#div2 { display:none; }

Also, make sure to include the missing ; in your script code:

 <script>
$(function(){

    $("button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});
</script>

Answer 2

Don't use the hide() function to conceal div2, utilize CSS instead.

#div2 { display:none; }

Also, make sure to include the missing ; in your script code:

 <script>
$(function(){

    $("button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});
</script>

Answer 3

Answer №2

 <!doctype html>
 <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script>
       $(document).ready(function() {
         $("#content2").hide();
         $("button").click(function(){
         $("#content1").hide()
         $("#content2").fadeIn(1000)
        });
        });
        </script>
 </head>

 <div id="content1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
    <button id="button">Click Me</button>
 </div>

 <div id="content2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
 </div>
 </html>

Answer 4

 <!doctype html>
 <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script>
       $(document).ready(function() {
         $("#content2").hide();
         $("button").click(function(){
         $("#content1").hide()
         $("#content2").fadeIn(1000)
        });
        });
        </script>
 </head>

 <div id="content1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
    <button id="button">Click Me</button>
 </div>

 <div id="content2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
 </div>
 </html>

Answer 5

Answer №3

Using jQuery is all you need to make your code work smoothly

$(document).ready(function() {
    $("#div2").hide();
    $("#button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
   
    
  </div>
     <button id="button">Click</button>
    
  <div id="div2">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

Answer 6

Using jQuery is all you need to make your code work smoothly

$(document).ready(function() {
    $("#div2").hide();
    $("#button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
   
    
  </div>
     <button id="button">Click</button>
    
  <div id="div2">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

Issue with hiding and showing two divs using Jquery

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a dynamically created Stripe checkout button

What is the best method for retrieving information from MongoDB and presenting it in a table with Node.js?

How does the method of including JavaScript libraries in HTML differ from adding them as npm dependencies?

I'm having trouble getting my <aside> HTML tag to align properly within my grid section

Is it possible to modify the border colors of separate elements in Bootstrap 5?

Tips for altering the distance between dots on a line

Changing the color of the selected item in a Jquery Mobile ListView

Deciphering the LocalDate and nested object array in an AJAX response

Swapping mouse cursor using JavaScript

Variable in v-for loop is not properly declared

jQuery eliminates initial div just a single time

The submission directed me to the PHP webpage

Can you explain the concept of a TransientTransactionError within Mongoose (or MongoDB)?

What's causing the problem with my custom filter?

Managing class values with Selenium - Manipulating and updating classes

Understanding Node.JS: A Dive into Key Concepts

I'm having some trouble with jQuery's GET function while working with CodeIgniter. Instead of retrieving a single value, it seems to be returning the source code for a

Linking a script to a button in ASP .NET MVC Razor View

Tips for sending jQuery variable with an Ajax GET call?

Leverage closures within Underscore.js templates for enhanced functionality