Problem with DIV in PHP loop

[genista]

Hi,

In the following code I am putting out the results from a database with the option of opening further details with Javascript by opening or closing a new DIV. I have each record displaying correctly in a box, but the DIV is causing me issues. When I click on the expand button all of the individual boxes open, but do not display anything. I am working on the basis that this DIV is acting globally rather than being executed for the individual box you click on. It might be better explained through the code...

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

//The following code is where the problem lies, by clicking on the button the box is opened in each box col5
?>
 <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;">
 <div class="panel_button" id="hide_button" style= "display: none;">   <object type="text/html" data='<?php $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue">
    </object>  

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

The Panel Button class is tied to the following:

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

        $("div#panel").animate({
            height: "0px"
        });
   });       

});

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

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

I am hoping this is something simple.

Thanks,

G

[Weedpacket]

It is invalid HTML to use the same ID for more than one element - ID attributes are for uniquely identifying an element, and if more than one element has the same ID there's no way to tell which one is actually intended.

[NogDog]

Also, this...

<?php $item_title; ?>

...should be this...

<?php echo $item_title; ?>

[genista]

NogDog;11042065 wrote:

Also, this...

<?php $item_title; ?>

...should be this...

<?php echo $item_title; ?>

Thanks, silly mistake!

[genista]

Weedpacket;11042063 wrote:

It is invalid HTML to use the same ID for more than one element - ID attributes are for uniquely identifying an element, and if more than one element has the same ID there's no way to tell which one is actually intended.

Thanks, I now have this then, but it is still opening in every box so I don't think I am understanding you correctly:

echo "<p>$title</p>";
echo "<img src=$source_image />";
echo "<p>item_url = $item_url</p>";
?>
 <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>
 <object type="text/html" data='<?php echo $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue">
    </object>  

    </div>
    </div>

[genista]

I have tidied things up (better validated HTML), any ideas what I need to do?

<div class="box col5">
        <?php
    $query_string = "cid={$content_id}&t={$item_id}&item_title={$item_title}";

$url_query_string = "http://www.disciply.com/article/index.php?" . $query_string;            

/*Start of dynamic content open*/
echo "<p>$title</p>";
echo "<img src=$source_image />";
echo "<p>item_url = $item_url</p>";
?>
 <div class="panel_button" style="display: visible;"><img src="../images/expand.png"  alt="expand"/> <a href="#"><?php echo $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>
 <object type="text/html" data='<?php echo $item_url;?>' width="100%" height="800px" style="overflow:auto;border:5px ridge blue">
    </object>  

    </div>
    </div>

Thanks,

G