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:



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


  • Chandu

    Chandu Correct answer

    9 years ago

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

    });

    Try using .addClass('hidden')/.removeClass('hidden'); where the selector .hidden is defined as { display:none }. This will help to avoid inline style and a possible CSS inheritance conflict.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM