Question

I have the below code and it does what I want but i know it is a bad way to right it. How could I accomplish the same thing without having to duplicate the code for each set of items. Any help would be greatly appreciated.

<script type="text/javascript">
$('#plink-1').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-1').slideToggle().addClass('active');
});
$('#plink-2').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-2').slideToggle().addClass('active');
});
$('#plink-3').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-3').slideToggle().addClass('active');
});
$('#plink-4').click(function() {
    $('.active').slideUp().removeClass('active');
    $('#pshow-4').slideToggle().addClass('active');
});

Answer 1

$('#plink-1, #plink-2, #plink-3, #plink-4').click(function() {
    var index = this.id.replace('plink-','');  // will give you ->  1,2,..
    $('.active').slideUp().removeClass('active');
    $('#pshow-' + index).slideToggle().addClass('active');
});