Member Avatar for Zagga

Hi folks.

I'm playing about with jQuery at the moment but I really don't have any js knowledge so I am going mostly by guess work. I ordered 2 js books yesterday though so I should be able to at least start learning the basics in a few days.


I am using the jQuery 'toggle' function and got it working nicely.

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>

<p id='block1'>Click Me</p>
<p id='toggle1'>The visibility of this gets toggled</p>

<script type='text/javascript'>
$('#block1').click(function () {
$('#toggle1').toggle('slow');
});
</script>

This works fine if I have a single block of elements to toggle but if I have multiple blocks of <p> (dynamically generated, this code is inside a foreach loop), and I want to have separate toggling in each block, I need to increment the id (block1 to block2 and toggle1 to toggle2 etc). I can use PHP to break the HTML statement and insert a variable to increment the id in the <p> tags but how do I increment the id in the javascript?

I hope I managed to explain this well enough for people to understand what I'm talking about :confused:


Zagga

  • 2 Contributors
  • 2 Replies
  • 195 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Zagga
Member Avatar for extemer

you want to say that if you have multiple paragraph then how would you apply JQ toggle on it.Is this what you asking for?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script  src="jquery.js"></script>

<script type='text/javascript'>

$(document).ready(function(){
$('p').hide();	
$("#new").show();	
$('a').click(function(){
					  
		$('p').toggle();
		
					  
					  
					  });
						   });
</script>

</head>

<body>

<a href="#">Click Me</a>
<p>The visibility of this gets toggled</p>
<p id="new">testing</p>

</body>
</html>
Member Avatar for Zagga

Hi extemer,

thanks for your reply but my problem was more about toggling seperate blocks.
I have been playing about with it over the weekend and managed to get what I wanted. Thanks for the input though.

Zagga

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.