Toggle hide and show text

JavaScript
1

i have a problem i have this code which expands and collapse the contents of $res[“maktoba”] i need it start as collapsed not expanded, the function toggleMe has to start automatically on the load of the page

<?php 
	include"connection.php";
?>
<HTML DIR=RTL xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<script type="text/javascript">
function toggleMe(a){
	var e=document.getElementById(a);
	if(!e)return true;
	if(e.style.display=="none"){
		e.style.display="block"
	}
	else{
	e.style.display="none"
	}
	return true;
}



function toggleImage(e) {
	obj = document.getElementById(e.id); //Gets the passed ID from 'toggleImage(this)'
	var filePathString = obj.src; //Puts the SRC of the input into string
	if(filePathString.indexOf("images/expand.gif")>1) //Checks to see if the file name is in the src
 	{
	// var obj.src = new Image();
	obj.src="images/collapse.gif"; //Sets picture to 'images/collapse.gif'
	return;
	}
	else
	{
	 //var obj.src = new Image();
	obj.src="images/expand.gif"; //Sets picture to 'images/expand.gif'
	return;
	}
}
</script>
<?php 
	$maxurl=mysql_query("select * from maktoba order by id desc limit 3");
	$count=0;
	while($res=mysql_fetch_array($maxurl))
	{
	?>
			<img type="image" src="images/expand.gif" id="changeImage <?php echo $count; ?>" onclick="return toggleMe('para<?php echo $count; ?>'), toggleImage(this)"><?php echo $res["maktoba_title"]; ?>
			<div id="para<?php echo $count; ?>">
				<?php echo $res["maktoba"]; ?>
			</div>
			<br>
	<?php $count++; 
	} ?>
</html>

i need it to start collapsed, i tried fiddling with the toggleme function code

<img type="image" src="images/expand.gif" id="changeImage <?php echo $count; ?>" onclick="return toggleMe('para<?php echo $count; ?>'), toggleImage(this)" onload="toggleMe('para<?php echo $count; ?>') ><?php echo $res["maktoba_title"]; ?>

but didn’t succeed, any suggestions???

2

Thanks

3

You only need the following modification:

from:

<div id="para<?php echo $count; ?>">

to:

<div id="para<?php echo $count; ?>" style="display:none">

I have made some modifications in your source code, it is shorter and I think, it is much more readable:

<head> 
    <script type="text/javascript">  
		function ToggleMaktoba (titleImg){
				// the id of the content element from the id of the title element
			var contentID = titleImg.id.replace (/title/, "content");
			var contentDiv = document.getElementById (contentID);
			
			if (contentDiv.style.display == "none") {
				titleImg.src = "images/collapse.gif";
				contentDiv.style.display = "block";
			}
			else {
				titleImg.src = "images/expand.gif";
				contentDiv.style.display = "none";
			}

			return false;
		}
    </script> 
</head> 
<body> 
<?php     
	$maxurl=mysql_query("select * from maktoba order by id desc limit 3");
	$count=0;
	while($res=mysql_fetch_array($maxurl))     {
?>
    <img src="images/expand.gif" id="maktoba_title<?php echo $count; ?>" onclick="return ToggleMaktoba (this)"><?php echo $res["maktoba_title"]; ?>
	<div id="maktoba_content<?php echo $count; ?>" style="display:none;">
		<?php echo $res["maktoba"]; ?>
	</div>
<?php
		$count++;
	}
?> 
</body>

<snip/>