asked on

Making the follwind div tag show on click

In my page I have it dynamically creating a line of text and then some content underneath it, this can happen a number of times depending on certain params.

What I need is to make the following div tag display on the click of a <span> that I have created.

Where is my error below? as it doesnt seem to work!

// my jquery
 
	$(function() {
	        $("#support").click(function() { $("div", $(this).parent()).toggle("slow"); });
	});
 
//my html 
 
<p class="tbl_p_title"><span id="support">Click to Support</span> - Title - Track </a></p>
<div id="rate_hide">
   This is the content! hidden in the css
</div

Open in new window

hielo

try:

$(function() {
              $("#support").click( function(){$("#rate_hide".toggle("slow");} );
      });

Open in new window

ShaneJones

ASKER

@hielo - This is saying its missing a bracket? also as a guess. if my php loop loads 5 times. it will have 5 divs with the id #rate_hide so wont this code show all of them. Hence me looking to show the following div.

the format can be like this totally depends on the number of lines

<p class="tbl_p"><span id="support">Click to support</span> - Artist name 1 - Title</p>
<div id="rate_hide">
Hidden part 1
<div>
<p class="tbl_p"><span id="support">Click to support</span> - Artist name 2 - Title</p>
<div id="rate_hide">
Hidden part 2
<div>
<p class="tbl_p"><span id="support">Click to support</span> - Artist name 3 - Title</p>
<div id="rate_hide">
Hidden part 3
<div>

Albert Van Halen

The id attribute is used to uniquely identify elements in the DOM.
It's better to postfix your elements with a index number like support_1, support_2, etc.
The same counts for het rate_hide element, postfix them like rate_hide_1, rate_hide_2, etc.

In this case you can bind the event to each element whos id starts with support_, get the id (via regex or something) and show/hide the rate div...
See code

Use any construction you want just to make each element unique...

$(function() {
    // bind the click event to each span whos id starts with support_
    $("span[id^='support_']").click(function() {
        // via regex remove each non-numeric character from the id property
        $("#rate_hide_" + this.id.replace(/\D+/,"")).toggle("slow");
    });
});

Open in new window

ShaneJones

ASKER

I have had it working here

http://test.shanedj.com/start/

but I just don't know how to make it work with this example.

Albert Van Halen

Have you tried the code??
Read the comments

It does almost the same.
Just look at the code form the url you posted :

$(function() {
$("h2").click(function() { $("div", $(this).parent()).toggle("slow"); });
});

A click event gets bound to each H2 element.
In the anonymous function, it will show/hide the child div element of the parent of the H2 element.

hielo

I think this is what you want

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(start);
function start(){
	$("p.tbl_p_title > .support").bind("click",function (){ alert( $(this).parent().siblings(".rate_hide").html() ); } );
}
 
 
</script>
</head>
<body>
<p class="tbl_p_title"><span class="support">Click to Support</span> - Title - Track </a></p>
<div class="rate_hide">
   This is the ALPHA content! hidden in the css
</div>
 
<p class="tbl_p_title"><span class="support">Click to Support</span> - Title - Track </a></p>
<div class="rate_hide">
   This is the BETA content! hidden in the css
</div>
</body>
</html>

Open in new window

ShaneJones

ASKER

@hielo - I don't need it to alert I simply need it to toggle it so that it displays in the page

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ShaneJones

ASKER

Exactly what I need