More efficient way of doing this hide()/show() jQuery I currently have the following jQuery code, which does work, but I know there is a better way of doing it without having to repeat myself so much:

&lt;script&gt;
$(document).ready(function() {

    $('.container').hide();

    $('#btn-post').click(function() {

        $('.container').hide();

    });

    $('#btn-game').click(function() {

        $('.container').hide();
        $('#game_container').show();
    });

    $('#btn-video').click(function() {

        $('.container').hide();
        $('#video_container').show();
    });

    $('#btn-giveaway').click(function() {

        $('.container').hide();
        $('#giveaway_container').show();
    });

});
&lt;/script&gt;


Basically, when a button is clicked, I need to show the additional div for that content type and hide the rest. If it's just a Post, then all of the divs are hidden as there is no specific div for the post type.

The HTML looks like this:

&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
  &lt;button id="btn-post" class="btn btn btn-primary active" type="button"&gt;Post&lt;/button&gt;
  &lt;button id="btn-game" class="btn btn btn-primary" type="button"&gt;Game&lt;/button&gt;
  &lt;button id="btn-video" class="btn btn btn-primary" type="button"&gt;Video&lt;/button&gt;
  &lt;button id="btn-giveaway" class="btn btn btn-primary" type="button"&gt;Giveaway&lt;/button&gt;
&lt;/div&gt;

&lt;div class="container" id="game_container"&gt;
game stuff
&lt;/div&gt;

&lt;div class="container" id="video_container"&gt;
video stuff
&lt;/div&gt;

&lt;div class="container" id="giveaway_container"&gt;
giveaway stuff
&lt;/div&gt;


What's the more efficient way of writing that jQuery?
Try this:

http://jsfiddle.net/VYSXn/

Change your HTML to (note the data attributes):

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

&lt;div class="container" id="video_container"&gt;
video stuff
&lt;/div&gt;

&lt;div class="container" id="giveaway_container"&gt;
giveaway stuff
&lt;/div&gt;


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();
    });

});