data attribute target toggle

by ian_smithz

HTML

<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>

JavaScript

$(document).ready(function() {

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

});