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> >