How can I shorten this javascript code? show hide multiple divs

Question

How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.

Thanks

        <script type='text/javascript'>
                $(document).ready(function () {
                    $(".mug1").click(function() {
                        $("#bios div").hide();
                        $(".bio1").show();                      
                    });                     
                    $(".mug2").click(function() {
                        $("#bios div").hide();
                        $(".bio2").show();                      
                    });                     
                    $(".mug3").click(function() {
                        $("#bios div").hide();
                        $(".bio3").show();                      
                    });                     

            });
        </script>   

        <h2>Meet the team</h2>

        <div id="mugshots">
            <img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
            <img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
            <img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
        </div>

        <div id="bios">
            <div class="bio1"></div>
                            <div class="bio2"></div>
                            <div class="bio3"></div>
                    </div>

Answer 1

Something along these lines?

Change the html to this:

    <div id="bios">
        <div class="bio"  data-id="1"></div>
                        <div class="bio" data-id="2"></div>
                        <div class="bio" data-id="3"></div>
                </div>

Then your js to this:

$(".mug").click(function() {
                    $("#bios div").hide();
                    $(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();                      
                }); 

This way you could add as many mugs and bios as you like without having to add any more js.

Answer 2

Simplest way is a for loop

$(document).ready(function () {
  for (var i = 1; i <= 3; i++) { 
    $(".mug" + i).click(function() {
       $("#bios div").hide();
       $(".bio" + i).show();
    });                     
  }
});

There may be a better way still that I'm not thinking of.

Answer 3

try this:

$(document).ready(function () {
    $("img[alt=mug]").each(function() {
        $(this).click(function(){
            var id = $(this).attr("class").substr(3, 1);
            $("#bios div").hide();
            $(".bio" + id).show();
        });
    });
});

Answer 4

Use the .eq() and the index of your mugshots, assuming the first mugshot goes with the first bio, second mugshot with second bio, and so on.

http://api.jquery.com/eq/

Also, use a class to keep track of your active bio rather than calling hide on all bios for each update.

JS:

$(document).ready(function() {
  $('#mugshots img').click(function() {
    $('#bios .active').hide().removeClass('active');
    $('#bios div').eq($(this).index()).show().addClass('active');
  });
});

HTML:

<h2>Meet the team</h2>

    <div id="mugshots">
        <img src="images/img-mugshot.jpg" alt="mug"/>
        <img src="images/img-mugshot.jpg" alt="mug"/>
        <img src="images/img-mugshot.jpg" alt="mug"/>
    </div>

    <div id="bios">
        <div></div>
        <div></div>
        <div></div>
    </div>

Answer 5

just use index and add as many as you want:

$('#mugshots>img').on('click', function() {
    $("#bios div").hide();
    var myIndex = $(this).index("#mugshots> img");
    $("#bios> div").eq(myIndex).show();
});

a shorter version of this is:

$('#mugshots>img').on('click', function() {
    $("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});