Jump to content

Toggle button icon issue


ainoy31

Recommended Posts

I have a table and each row contains possibly another row underneath.  I have a plus icon next to each expandable rows.  If one clicks on the plus icon, it will change to a minus icon and display the hidden rows.  My issue is that it only works for the first row.  Meaning, if I click on the second row, the icon for the first row changes to a minus icon but I need the icon to change for the rows I click.

 

Here is my JS for this:


function toggle(id)
{
var state = document.getElementById(id).style.display;

if(state == 'block')
{
	document.getElementById(id).style.display = 'none';
	var obj = document.getElementById('plus');
	obj.src="../../images/pplus.gif";
}
else
{
	document.getElementById(id).style.display = 'block';
	var obj = document.getElementById('plus');
	obj.src="../../images/mminus.gif";
}
}

 

Here is the code for the table:

<tbody>
<tr>
<td><a style="text-decoration: none" href="#" onclick="toggle('<?=$stateid?>');"><img id="plus" src="../../images/pplus.gif" style="border-color:white"></a>     <a style="text-decoration:none" href="javascript:void(0);" onclick="window.open('xxx.php?s=<?=$stateid;?>', '', 'width=800, height=1000, scrollbars=no')" href='' class='CT'><img src="../../images/edit.png" style="border:white; font: 8px;" alt="Edit"></a></td>
</tr>
</tbody>

 

I hope this is clear enough on my issue.  Much appreciation. AM

Link to comment
https://forums.phpfreaks.com/topic/156963-toggle-button-icon-issue/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.