Use classes:
<!DOCTYPE html>
<html dir="ltr" lang="en-CA">
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js";></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.SomeOtherClass').hide();
$('a.SomeClass').click(function()
{
$(this).next('div.SomeOtherClass').slideToggle(400);
$(this).text($(this).text() == 'More Details' ? 'Close' : 'More
Details');
return false;
});
});
</script>
</head>
<body>
<a href="#" class="SomeClass">More Details</a>
<div class="SomeOtherClass">
foo
</div>
<a href="#" class="SomeClass">More Details</a>
<div class="SomeOtherClass">
foo
</div>
<a href="#" class="SomeClass">More Details</a>
<div class="SomeOtherClass">
foo
</div>
</body>
</html>
On Tue, Dec 29, 2009 at 7:01 PM, Erik <eriks...@mac.com> wrote:
> Hi everyone,
>
> I got one DIV working with my toggle script. Works great.
>
> I need to add a few more DIV's with the same toggle script on the SAME
> PAGE. I wanted to duplicate the same script with different DIV names,
> but it didn't work.
>
> How can i use the same script with INDEPENDENT DIV's on the same page?
>
> Here is my good independent script.
>
> <script type="text/javascript">
> $(document).ready(function() {
> $('#content1').hide();
> $('a#slick-toggle').click(function() {
> $('#content1').slideToggle(400);
> $(this).text($(this).text() == 'More Details' ? 'Close' : 'More
> Details'); // <- HERE
> return false;
> });
> });
> </script>
>
