CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Khrys
Khrys

Reputation: 2774

Toggle DIVs in Bootstrap 3

I am trying to do a small adjustments in this code:

HTML

<div class="btn-group" data-toggle="buttons">
  <button type="button" title="left" class="btn btn-info active">left</button>
  <button type="button" title="right" class="btn btn-info">right</button>
</div>
<div class="btn-group" data-toggle="buttons">
  <button type="button" title="a" class="btn btn-info">dont toggle</button>
  <button type="button" title="b" class="btn btn-info">another function</button>
</div>
<div id="left"> LEFT CONTENT </div>
<div id="right"> RIGHT CONTENT </div>

JAVASCRIPT

$('.btn-group button').click(function(){
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
});

CSS

#right { display:none; }

http://jsfiddle.net/Nz964/

Any help will be great. Thanks.

Upvotes: 1

Views: 5664

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

1st Problem, you are using a very old version of jQuery(1.5) - bootstrap makes use of .on() method which was added in version jQuery 1.7 so You need to upgrade jQuery to 1.7 or above version

2nd problem, you need to narrow down your selector my adding another class

<div class="btn-group mytoggle" data-toggle="buttons">
    <button type="button" title="left" class="btn btn-info active">left</button>
    <button type="button" title="right" class="btn btn-info">right</button>
</div>

then

$('.mytoggle button').click(function(){
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
});

Demo: Fiddle

Upvotes: 1

Related Questions