jQuery hide elements of Widget Style ul li

Question

I am designing a widget style using HTML ul tag.

<div class='tabs' style='width:50%'>
<ul>
  <li id="basic-li"><a href='#basic_information'>Basic</a></li>
  <li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
  <li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
  <li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>

And I have 4 divs.

<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>

I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.

Answer 1

This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.

 $(document).ready(function(){ $('.tab').click(function(){ $('.tabs li').hide(); var idTab = $(this).data('id'); $('#' + idTab).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='tabs' style='width:50%'> <ul> <li id="basic-li"><a href='#basic_information'>Basic</a> </li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a> </li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a> </li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li> </ul> </div> <div id="basic_information" data-id="basic-li" class="tab">//basic info</div> <div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div> <div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div> <div id="confirm" data-id="confirm-li" class="tab">//confirm</div> 

Cheers...!!

Answer 2

This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:

<ul>      
  <!-- add data-target attribute to each "a", with value matching corresponding tab -->    
  <li>
    <a data-target="basic_information" href='#basic_information'>Basic</a>
  </li>
  <li>
    <a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
  </li>
  <li>
    <a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
  </li>
  <li>
    <a data-target="confirm" href='#confirm'>Confirmation</a>
  </li>
</ul>

<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>

<script>
$(function() {

  // Hide all tabs by default
  $('.tab').hide()

  // Assign click handler to all elements with data target attribute
  $('[data-target]').click(function() {

    // Hide all tabs
    $('.tab').hide()

    // Extra target id of the menu link that was clicked
    var tabToShow = $(this).data('target')

    // Show the corresponding tab
    $('#' + tabToShow).show()

    // Return false to prevent default navigation behaviour of links
    return false
  })

})
</script>