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?
 
cataleptic_stateConnect With a Mentor Author Commented:
Hi,
That does not work either, also only the top most div is hidden, not both.

Can I do a loop somehow?
0
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.