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

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