Skip to main content
Code Review

Return to Answer

Try this:

http://jsfiddle.net/VYSXn/

Change your HTML to(note the data attributes):

<div class="btn-group" data-toggle="buttons-radio">
 <button id="btn-post" class="btn btn btn-primary active" type="button">Post</button>
 <button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button">Game</button>
 <button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button">Video</button>
 <button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button">Giveaway</button>
</div>
<div class="container" id="game_container">
game stuff
</div>
<div class="container" id="video_container">
video stuff
</div>
<div class="container" id="giveaway_container">
giveaway stuff
</div>

and now your javascript cane becan just be:

$(document).ready(function() {
 $('.container').hide();
 $('.btn-group button').click(function(){
 var target = "#" + $(this).data("target");
 $(".container").not(target).hide();
 $(target).show();
 });
});

Try this:

http://jsfiddle.net/VYSXn/

Change your HTML to(note the data attributes):

<div class="btn-group" data-toggle="buttons-radio">
 <button id="btn-post" class="btn btn btn-primary active" type="button">Post</button>
 <button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button">Game</button>
 <button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button">Video</button>
 <button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button">Giveaway</button>
</div>
<div class="container" id="game_container">
game stuff
</div>
<div class="container" id="video_container">
video stuff
</div>
<div class="container" id="giveaway_container">
giveaway stuff
</div>

and now your javascript cane be just:

$(document).ready(function() {
 $('.container').hide();
 $('.btn-group button').click(function(){
 var target = "#" + $(this).data("target");
 $(".container").not(target).hide();
 $(target).show();
 });
});

Try this:

http://jsfiddle.net/VYSXn/

Change your HTML to(note the data attributes):

<div class="btn-group" data-toggle="buttons-radio">
 <button id="btn-post" class="btn btn btn-primary active" type="button">Post</button>
 <button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button">Game</button>
 <button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button">Video</button>
 <button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button">Giveaway</button>
</div>
<div class="container" id="game_container">
game stuff
</div>
<div class="container" id="video_container">
video stuff
</div>
<div class="container" id="giveaway_container">
giveaway stuff
</div>

and now your javascript can just be:

$(document).ready(function() {
 $('.container').hide();
 $('.btn-group button').click(function(){
 var target = "#" + $(this).data("target");
 $(".container").not(target).hide();
 $(target).show();
 });
});
Source Link
Chandu
  • 186
  • 5

Try this:

http://jsfiddle.net/VYSXn/

Change your HTML to(note the data attributes) :

<div class="btn-group" data-toggle="buttons-radio">
 <button id="btn-post" class="btn btn btn-primary active" type="button">Post</button>
 <button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button">Game</button>
 <button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button">Video</button>
 <button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button">Giveaway</button>
</div>
<div class="container" id="game_container">
game stuff
</div>
<div class="container" id="video_container">
video stuff
</div>
<div class="container" id="giveaway_container">
giveaway stuff
</div>

and now your javascript cane be just:

$(document).ready(function() {
 $('.container').hide();
 $('.btn-group button').click(function(){
 var target = "#" + $(this).data("target");
 $(".container").not(target).hide();
 $(target).show();
 });
});
default

AltStyle によって変換されたページ (->オリジナル) /