Oh okay ... just do something like this:
$(function() { // document.ready
$('.details').hide();
$('a.slick-toggle').bind('click', function() {
$(this)
.parent() // the p tag
.next('div.details') // the details we want
.toggle(400);
});
});
Untested but that should at least point you in the right direction.
Check out the API docs for DOM / Traversing for more info on the
parent() and next() method.
--
Brandon Aaron
On 1/30/07, Priest, James (NIH/NIEHS) [C] <[EMAIL PROTECTED]> wrote:
> 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
> > > discuss@jquery.com
> > > http://jquery.com/discuss/
> > >
> >
> > _______________________________________________
> > jQuery mailing list
> > discuss@jquery.com
> > http://jquery.com/discuss/
> >
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
