mootools toggle div loop problem

Hi I have a div that toggles, with mootools
But I have put my content in a php do while statement to get all records, but the toggle does not work if I have more than one entry in the database.

If I have two items, the 1st data entry is visible and will not toggle, the second will toggle
<script type="text/javascript" src="js/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('project_info_description');
	mySlide.hide(); 
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});


</script>

<style type="text/css">

#section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE; 
	font-size:12px;
}
#section div{
background:url(img/section_bg_right.png) right bottom no-repeat; 
	padding:10px; 
}
</style>

           <?php do { ?>
            <div id="project_info">
              <h3><a href="#" id="toggle"><?php echo $row_projects['project_name']; ?></a></h3>
              <?php echo $row_projects['project_date']; ?>
                <br />
                </div>
                
                <div id="project_info_description">
                <table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="150">
    
    
             <img name="image" src="proj_image/<?php echo $row_projects['project_image']; ?>" alt="<?php echo $row_projects['project_name']; ?>" title="<?php echo $row_projects['project_name']; ?>" width="150" height="150" />    </td>
    <td valign="top">
    
    <?php echo $row_projects['project_description']; ?>    </td>
  </tr>
</table>
</div>
                             
                
              <?php } while ($row_projects = mysql_fetch_assoc($projects)); ?>

Open in new window

LVL 4
cataleptic_stateAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hans LangerCommented:
I cant test it, but maybe you can try to use something like this:


<div id="project_info_description" onclick="this.toggle()">
or
<div id="project_info_description" onclick="myFunction(this)">


Because since you are repeating the code HTML for all the rows, there will be a lot element with id="toggle", and the function "$('toggle')" will only get one of them. So, if you put the code directly on the element and use "this" command, you will know that you are working with this element.
0
cataleptic_stateAuthor Commented:
Hi,
Thats not going to work as the name of the project has to have the toggle on it, so that it will expand.

Theres no point putting it on the <div id="project_info_description" ></div>
The click function should be on the name of the project: <h3><a href="#" id="toggle"><?php echo $row_projects['project_name']; ?></a></h3>

Cant I do some kind of loop?

How do other sites do it?
0
hieloCommented:
try:
<script type="text/javascript" src="js/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('project_info_description');
	mySlide.hide(); 
	
	$$('a.toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});


</script>

<style type="text/css">

#section {
	background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE; 
	font-size:12px;
}
#section div{
background:url(img/section_bg_right.png) right bottom no-repeat; 
	padding:10px; 
}
</style>

           <?php do { ?>
            <div id="project_info">
              <h3><a href="#" class="toggle"><?php echo $row_projects['project_name']; ?></a></h3>
              <?php echo $row_projects['project_date']; ?>
                <br />
                </div>
                
                <div id="project_info_description">
                <table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="150">
    
    
             <img name="image" src="proj_image/<?php echo $row_projects['project_image']; ?>" alt="<?php echo $row_projects['project_name']; ?>" title="<?php echo $row_projects['project_name']; ?>" width="150" height="150" />    </td>
    <td valign="top">
    
    <?php echo $row_projects['project_description']; ?>    </td>
  </tr>
</table>
</div>
                             
                
              <?php } while ($row_projects = mysql_fetch_assoc($projects)); ?>

Open in new window

0
cataleptic_stateAuthor Commented:
Hi,
That does not work either, also only the top most div is hidden, not both.

Can I do a loop somehow?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.