Each and This problem

[genista]

Hi,

I am trying to get to grips with 'each' and 'this' in Javascript. I have results from a database, put out in php (see below). For each item title I put out a new box, within that box I want the user to click and see more content just for that box. The problem is that my script opens all the boxes at once, so I want the focus to be on just the one the user is clicking on. Having read up on each and this I know that I am not understanding it so any help on this below would be much appreciated:

 <div class="box col5">
        <?php
/*Start of dynamic content open*/
echo "<p>$title</p>";
echo "<img src=$source_image />";

<div class="panel_button" style="display: visible;"><img src="../images/expand.png"  alt="expand"/> <a href="#"><?php $item_title; ?></a> </div> 
 <div class="panel_button" id="hide_button" style="display: none;"><img src="../images/collapse.png" alt="collapse" /> <a href="#">Hide</a> 
 <div class="panel_button" id="hide_button" style= "display: none;">   <object type="text/html" data='<?php echo $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue"> 
    </object>   

        </div> 
      </div> 
    </div>

And now for the Javascript that is causing me the issues, the 'each' and the 'this':

    <script>
$(document).ready(function() {
    $("div.panel_button").each(function() {
    $(this).click(

    function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()
        }); $("div#hide_button").click(<wbr>function(){              
    $("div#panel").animate({
        height: "0px"
    });
   });       

});

$(document).ready(function() {
    $("div.panel_button").each(function() {



    function(){ $("div#panel").animate({ height: "500px" }) .animate({
    height: "400px" }, "fast"); $("div.panel_button").toggle()
        }); $("div#hide_button").click(<wbr>function(){
    $("div#panel").animate({
        height: "0px"

    }, "fast"); 
  });       
});
</script>

Thanks,

G

[johanafm]

$(selector) - selects a bunch of DOM nodes, create javascript objects to represent them, and keep these objects inside a jQuery object. I will refer to these DOM node objects as the jQuery collection.

$(selector).each(callback) - Iterate over all the objects in the jQuery collection by calling the callback function. On each iteration, this refers to the next DOM node object from the jQuery collection. The callback is also passed an iteration index which starts at 0 and is increased on every iteration. Thus, $(selector).get(index) will always refer to the same DOM node object as this.

You are however doing things like:
Iterate over all obejcts and attach a click handler to each of them.
Where the click handler will then animate all objects that recieved the click handler to begin with.