CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Rwi
Rwi

Reputation: 137

Toggle Bootstrap tab panes with <select>

I have 2 main tabs A and B. Each tab has 2 subtabs which are A11, A12 and B11, B22. I am triggering those subtabs with links on A and B but now i want to change the links to be select option.

I've tried doing that using javascript but when i select A shows me A11 and when i select B shows me A22 not B11.

A live example of how it looks now with trigger on links can be found here.

Upvotes: 0

Views: 698

Answers (1)

max
max

Reputation: 8667

You can uncomment your first tabs nav (.nav-clase) and hide it using hidden class. Then in jQuery you can use change() function to change tabs after option changes.

$('#select').change(function () {
    if($(this).val() == '0') {
    $('.nav-clase').find('[href="#clasele24"]').tab('show');
  } else {
    $('.nav-clase').find('[href="#clasele58"]').tab('show');
  }
});

JSFIDDLE

Upvotes: 1

Related Questions