It looks like what you're doing is setting a variable for all of the
comments when the page is loaded, and reusing that variable when you
want to show the "Flag comment" section.
Instead, you'd want to only handle the comment that the user clicked
on by using the parent() function available in JQuery.
Something like the following (untested code):
$(document).ready(function(){
// --- Toggle Flag Comments On/Off --- //
$(".comment .flag-comment").hide();
// add in toggle button
$('.comment-header').append('<a class="button button-flag flag-
toggle" href=""><span>Flag This Comment</span></a>');
// toggles the flag form
$('.flag-toggle').click(function(){
// slowly expand/collapse
$(this).parent().parent().children('.flag-
comment').slideToggle('slow');
// toggles class on toggle button
$(this).toggleClass('flag-toggle-opened');
// disables the default html behavior of the <a> element
return false;
});
});
- George
On Apr 14, 5:43 pm, Brian Talbot <[EMAIL PROTECTED]> wrote:
> Hi All,
>
> I was wondering if anyone had any insight into an issue I'm having
> when using JQuery to show/hide a series of elements on a page. I
> currently have a set of comments (to be placed in a larger page) and
> along with each comment a form is needed to allow users to flag an
> individual comment.
>
> I've tried to create this page with accessibility in mind so there is
> one unique form (with its own ID) for each comment (also with its own
> ID). You can view a sample page without any styling here
> -http://brian-talbot.com/inventingroom/flagcomments/
>
> The interaction I'd like to have is when a user clicks on the "Flag
> This Comment" link (that I am inserting into each comment's <div>
> using JQuery) The form for the specific comment the user wants to flag
> (hidden by default using JQuery) toggles its visibility to visible and
> allows the user to enter information.
>
> What I have now doesn't account for the specific comment a user
> selects and expands all of the comments instead :o( Also, I'd love to
> be able to do the following:
>
> 1) Change the text of the "Flag This Comment" toggle link to display
> something else once the form is expanded for a particular comment -
> perhaps to something like "Cancel Flagging This Comment".
>
> 2) Dynamically add an href attribute to the "Flag This Comment" toggle
> link that provides an anchor link down to the corresponding flag form
> (i.e. <a class="button button-flag flag-toggle" href="#flag-
> comment001"><span>Flag This Comment</span></a>
>
> If anyone has any ideas and wouldn't mind sharing, it would be much
> appreciated. Thanks!
