Links stop working when using jquery to hide/show divs

Question

I've succeeded in getting divs to show/hide but now for some reason, all other links on the page stop working unless if I open them in a new tab. How can I get this fixed?

 $(document).ready(function () { $("#div9").show("slow").siblings().hide("slow"); $('a').click(function () { event.preventDefault(); var divname = this.name; $("#" + divname).show("slow").siblings().hide("slow"); }); $('#seeAll').click(function() { $('#div2').show("slow") $('#div3').show("slow") $('#div4').show("slow") $('#div5').show("slow") $('#div7').show("slow") $('#div8').show("slow") $('#div9').hide("slow") }) }); 

  <a class="people-letters" href="#" name="div2">A</a> <a class="people-letters" href="#" name="div3">B</a> <a class="people-letters" href="#" name="div4">C</a> <a class="people-letters" href="#" name="div5">D</a> EFGHIJKLMNOPQR <a class="people-letters" href="#" name="div7">S</a> TUV <a class="people-letters" href="#" name="div8">W</a> XYZnbsp;<a id="seeAll" class="people-letters" href="#">See All</a> <div> <div id="div2" style="display: none;"> div2 </div> <div id="div3" style="display: none;"> div3 </div> <div id="div4" style="display: none;"> div4 </div> <div id="div5" style="display: none;"> div5 </div> <div id="div7" style="display: none;"> div7 </div> <div id="div8" style="display: none;"> div8 </div> <div id="div9" style="display: none;"> div9 </div> </div> <a href="http://google.com/">Sample Link</a> 

Answer 1

EDIT:

You have bound your click event to ALL link elements by specifying 'a' as your selector. in order to bind it only to that specific link you can use your class that you've specified for the links that hide and show the div elements.

$('a.people-letters').click(function (event) {
    event.preventDefault();
    var divname = this.name;
    $("#" + divname).show("slow").siblings().hide("slow");
});