CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John
John

Reputation: 97

Tab not appearing unless clicked

I am using <select> element to display a container with info. Using JQuery I display the selected container and hide the rest. In the container I have three <div> elements.

  1. Description
  2. Measurement in CM
  3. Measurement in Inches.

The user has the ability to select which measurement unit to see by clicking on the different tabs. So far it all works great. It does display the info as wanted, however when I re-select different size I can not see any of the tabs info unless I click on one of them. In other words to re-create the issue:

  1. Select size
  2. Change the measurement units
  3. Re-select size
  4. Unless clicked none of the tab will show the info

To make it easier to understand I've created JSFIDDLE.

Can someone possibly have an idea how to keep the cm tab open by default even after the size was re-selected?

Upvotes: 2

Views: 195

Answers (2)

RealDeepak
RealDeepak

Reputation: 863

Try this: Its working. http://jsfiddle.net/realdeepak/yjaoccmb/2/

$(function () {
    $('#community').change(function () {
        var option = $(this).find('option:selected');

        var valuer = $(this).val();

        $("#tabs-" + valuer).prop('checked', true);

        $('#size-single1').toggle(option.hasClass('show1'));
        $('#size-single2').toggle(option.hasClass('show2'));

    }).change();
});

Upvotes: 1

Lauwrentius
Lauwrentius

Reputation: 503

I added some new class to the input checkbox tag (.cm and .in respectively)

<div class="d-tab"><input checked="checked" id="tab-6" class="cm" name="tab-group-2" type="radio" /> <label for="tab-6">&nbsp;Centimeters&nbsp;</label>

I also added a new function when selecting on the select size. This function to keep track which measurement is active.

$(".cm, .in").click(function(){
    $(".cm, .in").removeClass("active");       
    if($(this).hasClass("cm")){
        $(".cm").addClass("active");
    else
        $(".in").addClass("active");            
});

Lastly I tweaked the css to show the active state

[type=radio]:checked ~ label,
.cm.active ~ label,
.in.active ~ label{
  background: #dbd7d7;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .measurement-content,
.cm.active ~ label ~ .measurement-content,
.in.active ~ label ~ .measurement-content{
  z-index: 1;
  opacity: 1;
}

DEMO http://jsfiddle.net/a1jnLq49/

Upvotes: 0

Related Questions