How can I display a div by clicking list item

user_13751366 0
Viewed 600

I want to attach a div with all the individual list items. When I click a list tag, the div which is attach to this particular div must have a CSS property display: block and if any div which is attach with other list item and have display: block, they must convert to display: none automatically.

$(document).ready(function(){
   $('li').on("click",function(){
      $('li').removeClass("active")
      $(this).addClass('active')
    })
})
#tours {
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
}

#Visa {
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="ul">
  <li class="Tours active"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
  <li class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
  <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
  <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>
</ul>
       
 <div class="content-area">
   <div id="tours">
     <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
   <button class="btn btn-primary btn-lg">Try it</button>
 </div>

 <div id="visa">
   <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
   <button class="btn btn-secondary btn-lg">try it</button>
 </div>

with the help of jquery.

css html jquery
4 Answers

You need a way of correlating a given <li> with a given <div> to display. I've done that by giving the <li> tags a data-id attribute which corresponds to their associated <div>'s id attribute.

When you click a <li>, it hides all the <div> tags in the content-area, then extracts the data-id from the <li> you clicked to determine the id if the <div> to show.

$(document).ready(function(){
    $('li').on("click",function(){
        $('li').removeClass("active")
        $(this).addClass('active')

        $('div.content-area div').hide(); // Hide all divs in the content-area
        $('div#' + $(this).attr('data-id')).show(); // Show the corresponding div
    })
})
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
}

#Visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
    <li data-id="tours" class="Tours active"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
    <li data-id="visa" class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
    <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
    <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>
</ul>
       
<div class="content-area">
    <div id="tours">
        <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
        <button class="btn btn-primary btn-lg">Try it</button>
    </div>

    <div id="visa">
        <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
        <button class="btn btn-secondary btn-lg">try it</button>
    </div>
</div>

user_3787790

You can use a data attribute on your li, call it for example data-expand, which contains the selector of the right div to show. Then, for convenience, I added a class of content on all your paragraphs that are to be switched between.

Then, you can do something like the below:

$(document).ready(function(){
   //initially have all of them hidden (if you want to):
   $(".content").hide();

   $('li').on("click",function(){
      //get the right div to show, hide all others
      var divToExpand = $(this).data('expand');
      $(".content").hide();
      $(divToExpand).show();
      
      //other code you originally had
      $('li').removeClass("active")
      $(this).addClass('active')
   })
})
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
   
}

#visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
        <li class="Tours active" data-expand="#tours"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
        <li class="Visa" data-expand="#visa"> <a href="#visa" aria-expanded="false">VISA</a></li>


       </ul>
       
 <div class="content-area">
       <div class="content" id="tours">
         <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
         <button class="btn btn-primary btn-lg">Try it</button>
       </div>

       <div class="content" id="visa">
         <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
         <button class="btn btn-secondary btn-lg">try it</button>
       </div>
     </div>

user_76928590

First you need to add the active class to your CSS. Also, you had an error: the #visa identifier was written with a capital letter, and in the HTML code with a small letter. I also advise you to add a class to your identifiers in order not to get confused in the jQuery code in the future. I added the modal class.

$(document).ready(function(){
   $('li').on("click",function(){

      $('li').removeClass("active");
      $(this).addClass('active');
      
      $('.content-area .modal').removeClass("active");
      $('.content-area .modal').eq($(this).index()).addClass("active");
   })
});
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}

#visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}

.active {
    display: block!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
        <li class="Tours active"> <a href="#tours" aria-expanded='true'> TOURS </a></li>
        <li class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
        <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
        <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>


       </ul>
       
 <div class="content-area">
       <div id="tours" class="modal active">
         <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
         <button class="btn btn-primary btn-lg">Try it</button>
       </div>

       <div id="visa" class="modal">
         <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
         <button class="btn btn-secondary btn-lg">try it</button>
       </div>
     </div>

user_135734440

I hope that you wanted something like this. Enjoy:

$(document).ready(function(){
  $('li').on("click",function(){
    var a = this.className;
    var b = "#"+a;
    $(".details").css("display", "none");
    $(b).css("display", "block");
  })
})
.details {
    background: #fff;
    box-shadow: 2px 3px 3px 0px;
    border: 1px solid #333;
    position: absolute;
    height: 150px;
    width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="ul">
  <li class="tours"> 
    <a href="#tours">TOURS</a>
  </li>
  <li class="visa"> 
    <a href="#visa">VISA</a>
  </li>
  <li class="hotels"> 
    <a href="#hotels">HOTELS</a> 
  </li>
  <li class="flights"> 
    <a href="#flights">FLIGHTS</a> 
  </li>
</ul>
       
 <div class="content-area">
 
   <div id="tours" class="details">
     <p> This is content of tours...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>

   <div id="visa" class="details">
     <p>This is content of visa...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>
   
   <div id="hotels" class="details">
     <p>This is content of hotels...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>
 
   <div id="flights" class="details">
     <p>This is content of flights...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>

</div>

user_26859140
Related