Question

I’m trying to create a dropdown effect on three paragraphs on the same line, and I’ve come up with a solution that works, however I feel like I must be breaking the “DRY” rule of programming here. Is there a faster, more efficient way of doing this?

$(function(){

        var btn1 = $('.span4 .btn:eq(0)');
        var btn2 = $('.span4 .btn:eq(1)');
        var btn3 = $('.span4 .btn:eq(2)');
        var p1 = $('.span4 p:eq(0)');
        var p2 = $('.span4 p:eq(1)');
        var p3 = $('.span4 p:eq(2)');

        btn1.click(function(){

            p1.slideToggle('slow');

        });

        btn2.click(function(){

            p2.slideToggle('slow');

        });

        btn3.click(function(){

            p3.slideToggle('slow');

        });

});

Answer 1

$(function(){
    var buttons = $('.span4 .btn');
    var paragraphs = $('.span4 p');

    $('.span4').on('click', '.btn', function () {
        paragraphs.eq(buttons.index(this)).slideToggle();
    });
});

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

---

Or take a similar approach to the one I describe in the later part of this answer: https://stackoverflow.com/a/12803518/139010.