Think I got this working - I found this:
http://host.sonspring.com/portlets/
And it uses something like: $(this).parent().next().toggle();
Which seems to work in my initial testing!
jquery rocks!
Jim
> -----Original Message-----
> From: Priest, James (NIH/NIEHS) [C]
> Sent: Tuesday, January 30, 2007 2:42 PM
> To: jQuery Discussion.
> Subject: Re: [jQuery] dynamic id's for show/hide toggle?
>
> Unfortunately I'm behind a firewall :(
>
> Basically I'm looping over a query returned from a database...
>
> <cfoutput query="myQuery">
> <div class="desc">
> <p>This requirement description</p>
> <p class="showhide">[+] <a href="##"
> class="slick-toggle">Show/hide requirement details</a></p>
>
> <div class="details"> <!-- this div will be
> initially hidden -->
> <ul>
> <li>List item 1</li>
> <li>List item 2</li>
> <li>List item 3</li>
> </ul>
> </div>
> </div>
> </cfoutput>
>
>
> Ideally I want a compact list of requirements - then when the
> user clicks on the 'show/hide' link - the requirement details
> for that particular requirement drop down. Right now it
> works but ALL the details for all the list items display as
> one! :) So I'm assuming I need to assign a unique ID to each one:
>
> So in ColdFusion I can do:
>
> <cfoutput query="myQuery">
> <div class="desc-#currentRow#">
> <p>This requirement description</p>
> <p class="showhidedetails-#currentRow#">[+] <a href="##"
> class="slick-toggle">Show/hide requirement details</a></p>
>
> <div class="details-#currentRow#">
> <ul>
> <li>List item 1</li>
> <li>List item 2</li>
> <li>List item 3</li>
> </ul>
> </div>
> </div>
> </cfoutput>
>
>
> Which would really output in HTML:
>
>
> <div class="desc-1">
> <p>This requirement description</p>
> <p class="showhidedetails-1">[+] <a href="##"
> class="slick-toggle">Show/hide requirement details</a></p>
>
> <div class="details-1">
> <ul>
> <li>List item 1</li>
> <li>List item 2</li>
> <li>List item 3</li>
> </ul>
> </div>
> </div>
> <div class="desc-2">
> <p>This requirement description</p>
> <p class="showhidedetails-2">[+] <a href="##"
> class="slick-toggle">Show/hide requirement details</a></p>
>
> <div class="details-2">
> <ul>
> <li>List item 1</li>
> <li>List item 2</li>
> <li>List item 3</li>
> </ul>
> </div>
> </div>
>
>
> Etc...
>
> But I'm not sure how to reference those dynamic class names in jquery.
> I'm guessing I need to loop over my jquery somehow but not
> being that familiar with jquery - I'm not sure.
>
> My jquery script looks like:
>
> <script type="text/javascript">
> $(document).ready(function() {
> // hides the slickbox as soon as the DOM is ready // (a
> little sooner than page load)
> $('.details').hide();
> // toggles the slickbox on clicking the noted link
> $('a.slick-toggle').click(function() {
> $('.details').toggle(400);
> });
> });
> </script>
>
> Thanks for the help!
> Jim
>
>
>
>
> > -----Original Message-----
> > I'm a little confused about what you are needing. Could you show an
> > example of what is currently up? That would also show the
> structure of
> > your code. You might just be able to use selectors instead
> of IDs to
> > find the elements you want to show/hide.
> >
> > --
> > Brandon Aaron
> >
> > On 1/30/07, Priest, James (NIH/NIEHS) [C] <[EMAIL PROTECTED]>
> > wrote:
> > > I'm just getting started with jquery so bear with me :)
> > >
> > > I'm working on displaying a dynamic list generated with
> > ColdFusion. I
> > > found the "slicker show/hide" tutorial and have that
> working - but
> > > need to show/hide elements on each row of my list. Right
> > now it works
> > > - but when I click my show/hide link - ALL the hidden
> elements are
> > > displayed
> > > :)
> > >
> > > So I'm guessing I need jquery to respond to a dynamically
> generated
> > > ID...
> > >
> > > <a href="#" id="myID-#currentRow#>show/hide</a>
> > > <div id="details-#currentRow#>Lorem Ipsum goes here</div>
> > >
> > > But so far all my searches have been unsuccessful. I'm
> sure others
> > > have run into this...
> > >
> > > Anyone have an example showing how to do this?
> > >
> > > Thanks!
> > > Jim
> > >
> > > _______________________________________________
> > > jQuery mailing list
> > > [email protected]
> > > http://jquery.com/discuss/
> > >
> >
> > _______________________________________________
> > jQuery mailing list
> > [email protected]
> > http://jquery.com/discuss/
> >
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
