Jquery seçicilerden dolayı oluşan kod kalabalığı

Kod aşağıda kodun ana mantığı 1 numaralı butona tıkladığımda  2 3 4 numaralı içerikleri gizliyor ve sadece 1 numaralı içerik ortada kalıyor.İki numaralı içeriğe tıkladığımda ise sadece 2. içerik divi görünüyor bunu var =index değeri atayıp bunun dışında kalanları yada belirlediklerimi gizleme yolu ile yapmaya çalıştım fakat başaramadım bunu nasıl yapabileceğimi söyleyebilirmisiniz.

$(function(){
       $(".icerik").hide();
       $(".icerik:eq(0)").show();
       //buton 1
       $(":button:eq(1)").click(function(){
           $(".icerik:eq(0)").show();
           $(".icerik:eq(1),.icerik:eq(2),.icerik:eq(3)").hide();

        });
        //buton 2
       $(":button:eq(2)").click(function(){
           $(".icerik:eq(1)").show();
           $(".icerik:eq(0),.icerik:eq(2),.icerik:eq(3)").hide();
        });
       //buton 2
       $(":button:eq(3)").click(function(){
           $(".icerik:eq(2)").show();
           $(".icerik:eq(0),.icerik:eq(3),.icerik:eq(1)").hide();
        });
        //buton 4
        $(":button:eq(4)").click(function(){
           $(".icerik:eq(3)").show();
           $(".icerik:eq(0),.icerik:eq(1),.icerik:eq(2)").hide();
           
        });
       });

ogzhn (1)
9 yıl önce sordu

---