How can I shorten this javascript code? show hide multiple divs
<p>How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.</p>

<p>Thanks</p>

<pre><code>        &lt;script type='text/javascript'&gt;
                $(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();                      
                    });                     

            });
        &lt;/script&gt;   

        &lt;h2&gt;Meet the team&lt;/h2&gt;

        &lt;div id="mugshots"&gt;
            &lt;img src="images/img-mugshot.jpg" alt="mug" class="mug1"/&gt;
            &lt;img src="images/img-mugshot.jpg" alt="mug" class="mug2"/&gt;
            &lt;img src="images/img-mugshot.jpg" alt="mug" class="mug3"/&gt;
        &lt;/div&gt;

        &lt;div id="bios"&gt;
            &lt;div class="bio1"&gt;&lt;/div&gt;
                            &lt;div class="bio2"&gt;&lt;/div&gt;
                            &lt;div class="bio3"&gt;&lt;/div&gt;
                    &lt;/div&gt;
</code></pre>
