On page click random div show and hide with jquery

Question

I have two div on application. I want two randomly show and hide those div when click on the navigation link and the next page load completely.

Below example not include multiple pages only single page. So want random show and hide div from multiple page load.

Example - The div 1 always visible so if user click on any navigation link and next page open then the 1st div hide 2nd div will be show same apply for other navigation link click. switch two div randomly .

Code :

 $(".navbar .nav-link").click(function() { if ($('.card1:visible').length) { $('.card1').hide(); $('.card2').show(); } else { $('.card1').show(); } });

 .hide { display: none; } .Wrap .card img { height: 250px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div> </div> </nav> <div class="Wrap"> <div class="card card1 " style="width: 18rem;"> <img src="https://picsum.photos/200/300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Home Content</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card card2 hide" style="width: 18rem;"> <img src="https://picsum.photos//id/237/200/300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">About Content</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>

Answer 1

here is a working demo hope it will help I have done some minor changes in your code now it's working.

 $(document).ready(function () { $('.card2').hide(); $(".navbar .nav-link").click(function () { if ($('.card1:visible').length) { $('.card2').show(); $('.card1').hide(); } else { $('.card1').show(); $('.card2').hide(); } }); });

 .hide { display:none; } .Wrap .card img { height: 250px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div> </div> </nav> <div class="Wrap"> <div class="card card1 " style="width: 18rem;"> <img src="https://picsum.photos/200/300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Home Content</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card card2 hide" style="width: 18rem;"> <img src="https://picsum.photos//id/237/200/300" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">About Content</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>