HOW TO HIDE THE CONTENTS OF THE TAB

ezra heywood

Total Post:145

Points:1019
Posted by  ezra heywood
 1230  View(s)
Ratings:
Rate this:

Hi Everyone!

I have 4 tabs, each tab contains different data. When I click on the checkbox, the corresponding tab is shown.But when I uncheck, the tab is invisible but

the contents are not invisible. How to solve this problem? My page is

<style>
    .ui-state-disabled {
    display: none;
}
</style>
    <script>
    $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
         $('#tabs').tabs("disable", $(this).val());
    }
});
});
</script>
.

<body>
 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nithin</a> </li>
    <li><a href="#tabs-2">Vipin</a></li>
    <li><a href="#tabs-3">Sachin</a></li>
    <li><a href="#tabs-4">Ganguly</a></li>
  </ul>
  <div id="tabs-1">
    <p>Nithin</p>
  </div>
  <div id="tabs-2">
    <p>Vipin</p>
  </div>
   <div id="tabs-3">
    <p>Sachin</p>
  </div>
   <div id="tabs-4">
    <p>Ganguly</p>
  </div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
</body>
</html>

Thanks in advance!

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: How to hide the contents of the tab

    Hi Ezra!

    Try this JQuery!
    $(function() {
      $("#tabs").tabs();
      $("#tabs").tabs("option", {
        "selected": 0,
        "disabled": [1,2,3]
      });

    $( "input[type=checkbox]" ).click(function(){
        if ($(this).is(':checked')) {
         $('#tabs').tabs("enable", $(this).val());
         $('#tabs').tabs("select", $(this).val() );
        }
        else{
            $('#tabs').tabs("disable", $(this).val());
            var tab = $(this);
            $('#tabs').tabs("select", $(":checked").first().val());
            //$('#tabs').tabs("select", $(":checked").last().val());
            //It is based on you what to use. (first or last selected value)
        }
    });
    });

      Modified On Mar-05-2013 08:08:56 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!