More efficient way of doing this hide()/show() jQuery

Question

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:

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

});
</script>

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:

<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" class="btn btn btn-primary" type="button">Game</button>
  <button id="btn-video" class="btn btn btn-primary" type="button">Video</button>
  <button id="btn-giveaway" 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>

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

Answer 1

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

});

Answer 2

Try this:

jsBin demo

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

$('.btn').click(function() {
  
  $('.container').hide();
  $('#'+this.id.split('-')[1]+'_container').show();

});

Answer 3

I'd suggest:

$('button[id^=btn]').click(
    function() {
        var affects = this.id.split('-')[1];
        $('.container').hide();
        $('#' + affects + '_container').show();
    });​

JS Fiddle demo.

References:

• attribute-starts-with [attribute^="value"] selector.

Answer 4

First off, your model looks a lot like many implementations of a tab-based interface. Using one of the existing frameworks for that will make your life a lot easier and avoid you re-writing boilerplate. Some people are partial to JQuery-UI's tabs, but I much prefer Bootstrap's. (Your syntax actually suggests you might be using Bootstrap's Button Groups already...) In addition to the obvious function that fires when you click on a tab, you can also just use $(#id_for_tab_you_want).tab('show') for programmatic access to hide/show the tabs. Much easier than showing and hiding everything manually. (Also, note that you don't need to actually show the tab UI in order to use the logic. You can hide either the whole list of tabs, or just the ones you don't want to see. The functions still work well.)

But if you want a plain-old JQuery option, chaining and the siblings() function can boil it down into one line for you inside your listener function:

$("#" + $(this).data("target")).show().siblings('.container').hide()

What you're doing is locating your target <div>, showing it, then immediately finding any siblings it has with the class .container, and hiding those. Here's an updated Fiddle.

Answer 5

Better solution with only one line of JS/Jquery, as demoed here: http://jsfiddle.net/krY56/13/

This leverages the .Toggle functionality, which is perfect for this