My issue involves managing the behavior of dynamically generated <div> elements on my webpage. I am struggling to control these elements as intended. I have implemented an onclick Toggle function to show/hide the div Panel. However, since all the dynamically generated <div> share the same class/ID, when I click on one element to trigger the function, the Toggle function is applied to all the elements on the page instead of just the specific <div> that I clicked on. I understand that this is happening due to the shared ID/class, but I am unsure how to resolve this issue.
The code structure I am working with is as follows:
<div class='Button'>Click to slide the panel down or up</div>
<div class='Panel'>some form elements...</div>
Here is the jQuery code I am using:
$(document).ready(function(){
$(".Button").click(function(){
$(".Panel").slideToggle("slow");
});
I would greatly appreciate any assistance in resolving this problem.