How to hide the contents of the tab

Question

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 
<br>
</body>
</html>

You can see the working code on http://jsfiddle.net/2aQ2g/12/

`the tab is invisible but the contents is not invisible.`.....? — Jai, Mar 05 '13 at 05:41
you are just disabling the tab, you aren't hiding the content at all ?? just make sure you hide the content as well and show only relavant content. — X-Factor, Mar 05 '13 at 05:42
@Nithu i think you didn't correctly defined your question :( — X-Factor, Mar 05 '13 at 06:04

score 3 · Answer 1 · answered Mar 05 '13 at 06:08

Just check the else portion ... Working Demo

$(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());
        $('#tabs').tabs("disable", $(this).val());
         $('#tabs').tabs("select", $(this).prev().val());
         $('#tabs').tabs("enable", $(this).prev().val());
    }
});
});

PSR · Answer 2 · 2013-03-05T05:57:24.530

2

try this

$( "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());
      $("#tabs-"+$(this).val()).children().hide());
    }
});

you just disable tab.Hide the contant also

edited Mar 05 '13 at 05:57

answered Mar 05 '13 at 05:44

PSR

39,804
41
111
151

this will hide all the text, and will not show the previous shown text :( – X-Factor Mar 05 '13 at 05:59

Jai · Answer 3 · 2013-03-05T06:02:25.090

2

May be this could help:

$("input[type=checkbox]").click(function () {
    if ($(this).is(':checked')) {
        $('#tabs').tabs("enable", $(this).val());
        $('#tabs').tabs("select", $(this).val());
        $('[id="' + this.name + '"]').find('p').show();
    } else {
        $('#tabs').tabs("disable", $(this).val());
        $('[id="' + this.name + '"]').find('p').hide();
    }
});

Note:

No need to add a content class.

just checkout the fiddle here

edited Mar 05 '13 at 06:02

answered Mar 05 '13 at 05:47

Jai

74,255
12
74
103

But when I hide the tab,the content also hidden.But there is also missing the contents of other tab – Nithin Viswanathan Mar 05 '13 at 05:50
@Nithu Just updated the answer and the fiddle try this out. – Jai Mar 05 '13 at 06:02

MIIB · Answer 4 · 2013-03-05T06:10:24.350

2

Add var hhh = $("input:checked").val(); $('#tabs').tabs("enable", hhh); $('#tabs').tabs("select", hhh ); $("#tabs-"+hhh+" p").show(); to your else.

Live Demo

                $(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() );
     $("#tabs-"+$(this).val()+" p").show();
    }
    else{
         $('#tabs').tabs("disable", $(this).val());
        $("#tabs-"+$(this).val()+" p").hide();
        var hhh = $("input:checked").val();
        $('#tabs').tabs("enable", hhh);
     $('#tabs').tabs("select", hhh );
     $("#tabs-"+hhh+" p").show();
    }
});
});

edited Mar 05 '13 at 06:10

answered Mar 05 '13 at 05:52

MIIB

1,849
10
21

But when I hide the tab,the content also hidden.But there is also missing the contents of other tab – Nithin Viswanathan Mar 05 '13 at 05:58
I've edited the code and the jsfiddle link. Now it's working – MIIB Mar 05 '13 at 06:10
@MIIB-pls check this link http://stackoverflow.com/questions/15224642/one-to-many-relationships-in-compoundjs – Jetson John Mar 06 '13 at 08:48

score 2 · Answer 5 · answered Mar 05 '13 at 05:52

    $(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());
             $('#'+$(this).attr('name')).hide();
        }
    });
});

But when I hide the tab,the content also hidden.But there is also missing the contents of other tab — Nithin Viswanathan, Mar 05 '13 at 06:01

X-Factor · Accepted Answer · 2013-03-05T06:42:12.880

2

You can check it on JSFiddle

$(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)
    }
});
});

I hope this helps. Regards

edited Mar 05 '13 at 06:42

answered Mar 05 '13 at 05:54

X-Factor

2,067
14
18

It working only in fiddle.My page shows nothing – Nithin Viswanathan Mar 05 '13 at 05:56
then go and check your code, if it doesn't matches jsfiddle ? – X-Factor Mar 05 '13 at 05:57
there must be some issue in your code :( it must work if it is working in fiddle :( – X-Factor Mar 05 '13 at 05:58
I copied the code you mentioned but not working properly. Only tab is hidden. contents is there – Nithin Viswanathan Mar 05 '13 at 06:07
@Nithu, the content of the previous tab will be shown. – X-Factor Mar 05 '13 at 06:08
Your code is correct.I saw in the fiddle,but I don't know whats the real mistake – Nithin Viswanathan Mar 05 '13 at 06:09
i did my best bro, at least if it is not working on your system then you are missing some thing or you are doing some thing wrong. Go double check your code and let me know. Regards – X-Factor Mar 05 '13 at 06:11
Sure friend..I will find it out – Nithin Viswanathan Mar 05 '13 at 06:13
It is not correct. If the previous tab is not checked, your code do wrong (it shows and unchecked tab) – MIIB Mar 05 '13 at 06:14
@MIIB if the pervious tab is not checked text must be shown (did you checked the JSFiddle provided by the questioner) there was already text provided before the tab was there ?? did you understood the question at all ? – X-Factor Mar 05 '13 at 06:18
@X-Factor Good solution though. – yourdeveloperfriend Mar 05 '13 at 06:23
@X-Factor:- The code is worked but onloading the first tab shows the content of the 3rd. – Nithin Viswanathan Mar 05 '13 at 06:38
@Nithu i updated JSFiddle check it out http://jsfiddle.net/2aQ2g/29/, and edited the code as well just select it as per your requirement. – X-Factor Mar 05 '13 at 06:44
@x-factor- When I click on that checkbox I don't want activate that tab.If I want that tab I will take it on mouse click. – Nithin Viswanathan Mar 05 '13 at 07:28
something like this @Nithu http://jsfiddle.net/2aQ2g/30/ – X-Factor Mar 05 '13 at 07:32
Thank you man X-factor... You are so helpful – Nithin Viswanathan Mar 05 '13 at 07:39
@Nithu we are here to help :) Regards – X-Factor Mar 05 '13 at 07:40
@X-Factor- you must check this link also http://stackoverflow.com/questions/15219957/how-to-assign-the-text-boxes-in-a-specified-manner – Nithin Viswanathan Mar 05 '13 at 09:19

score 1 · Answer 7 · answered Mar 05 '13 at 05:50

1

add class ui-state-disabled in else part to the element then it will display: none;

answered Mar 05 '13 at 05:50

Sahil Popli

1,967
14
21

How to hide the contents of the tab

7 Answers7

Note: