Question

I need to run same effect in multi id’s in the same page
What is the short way to do this:

function showDisc1(){$('#bottomBox1').slideDown();$("#bottomBox1").addClass("open");$("#bottomBox1").removeClass("close");}
function showDisc2(){$('#bottomBox2').slideDown();$("#bottomBox2").addClass("open");$("#bottomBox2").removeClass("close");}
function showDisc3(){$('#bottomBox3').slideDown();$("#bottomBox3").addClass("open");$("#bottomBox3").removeClass("close");}
function showDisc4(){$('#bottomBox4').slideDown();$("#bottomBox4").addClass("open");$("#bottomBox4").removeClass("close");}
...... etc

$(document).ready(function() {
$('#openbottomBox1').click(function(){
if ( $('#bottomBox1').hasClass('close') ) {
showDisc1();
} else if ( $('#bottomBox1').hasClass('open') ) {
hideDisc1();
};});});
.... again!!

HTML:

<div class="bottomBox close">
<div class="wrapper">
<a class="left disc" href="javascript:;" id="openbottomBox1"><div class="left text">View Description</div><div class="sprite right"></div></a> | <a class="itemDetails" href="javascript:;" id="itemDetails1">Details</a>
</div>
<p class="close clear discContent" id="bottomBox1"><a href="javascript:;" class="hideDisc" id="hideDisc1">x</a>
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
</p>
</div>

Answer 1

If you have no other choice but to use IDs as identifiers, use this:

$(document).ready(function()
{
    $('#openbottomBox1, #openbottomBox2, #openbottomBox3, #openbottomBox4').click(function()
    {
        var $bottomBox = $('#bottomBox' + this.id.substr(-1));

        if ( $bottomBox.hasClass('close') )
        {
            $bottomBox.slideDown().addClass('open').removeClass('close');
        }
        else if ( $bottomBox.hasClass('open') )
        {
            $bottomBox.slideUp().removeClass('open').addClass('close');
        };
    });
});