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!
