Question

im new to jquery and javascript.. Here is the code, this is a sample, on the real page there will be over 150 kinds of drinks, 5 are shown below, is there a way to condense this code? It makes it so when clicking one div another div will bounce. The divs that bounce contain small images, this is used as a giant menu system for finding drinks. thank you for your time and help.

$(document).ready(function(){
 $("#Pepsi").click(function (){
     $("#Pepsi-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });
 $("#Coke").click(function (){
     $("#Coke-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });
 $("#Crush").click(function (){
     $("#Crush-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });
 $("#7up").click(function (){
     $("#7up-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });
 $("#RootBeer").click(function (){
     $("#RootBeer-Div").delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });
});

Answer 1

To elaborate on JK’s answer, you could try this:

$(".drink").click(function (){
    $('#'+$(this).attr('id')+'-Div"]').delay(600).effect("bounce", { times:3, distance:30 }, 300);
 });

This selects the element with id X-Div, where X is the id of the clicked element.