Question

I’m creating a personal site to showcase demo material, and I would like to allow users to click on a thumbnail which causes a small window to animate downward and display details. Currently, I have it working perfectly, but as I continue to add items, the code is getting very repetitive. I’m having to repeat all of this code for “item2,” “item3,” etc… Is there a more efficient way to handle this with possibly 1 script and maybe 1 animated containing box for my content? I’m new to jQuery and Javascript, and I’d like to get better at streamlining my code.

Here’s what I’m using:

 <script type="text/javascript">
 $(function() {
 $('#activator_item1').click(function(){
    $('#overlay').fadeIn('fast',function(){
        $('#box_item1').animate({'top':'250px'},500);
    });
  });
  $('#boxclose_item1').click(function(){
    $('#box_item1').animate({'top':'-500px'},500,function(){
        $('#overlay').fadeOut('fast');
    });
  });

 });
 </script>

CSS

 .box_item1{
        position:fixed;
        top:-800px;
        height:400px;
        width:550px;
        left:30%;
        right:30%;
        background-color:#fff;
        color:#333;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
        text-align:left;
    }
    .box_item1 h1{
        border-bottom: 1px solid #7F7F7F;
        margin:-20px -20px 0px -20px;
        padding:10px;
        background-color:#1E87BE;
        color:#fff;
        font-family:"Arial Black", Gadget, sans-serif;
        -moz-border-radius:20px 20px 0px 0px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-top-right-radius: 20px;
        -khtml-border-top-left-radius: 20px;
        -khtml-border-top-right-radius: 20px;
    }
    a.boxclose_item1{
        float:right;
        width:26px;
        height:26px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
    }
    a.activator_item1{
        width:153px;
        height:150px;
        position:relative;
        top:0px;
        left:0px;
        z-index:1;
        cursor:pointer;

HTML

 <div id="item1"><a class="activator_item1" id="activator_item1"><img    src="images/item1_button.png"/></a></div>

 <div class="overlay" id="overlay" style="display:none;"></div>

 <div class="box_item1" id="box_item1">
  <a class="boxclose_item1" id="boxclose_item1"></a>
  <h1>Title</h1>

   <h2>Content</h2>
   <h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>

 </div>
 </div>

Answer 1

You are quite close. Instead of selecting elements by “id”, select them using their associated class (using a dot “.” rather than “#”), ex. $(‘.activator_item1’) – this will apply the same code to all activator_items.