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/
