Recently, I attempted to implement a second drop panel following the tutorial on this website:
I managed to create the second drop panel successfully. However, I am seeking guidance on how to change the image of the second drop panel without affecting the first one.
Below is a snippet of my CSS code:
<style type="text/css">
div.css3droppanel { /* Main wrapper for push down panel */
position: relative;
margin: 0;
margin-bottom: 2em; /* margin with rest of content on page */
}
/* More CSS Code... */
</style>
And here are the details of the two drop panels:
<div class="css3droppanel">
<input type="checkbox" id="droptoggle" />
<label for="droptoggle" title="Click to open Panel"></label>
<div class="content">
<p>
the first drop panel
</p>
</div>
</div>
<div class="css3droppanel">
<input type="checkbox" id="droptoggle" />
<label for="droptoggle" title="Click to open Panel"></label>
<div class="content">
<p>
the second drop panel
</p>
</div>
</div>
Currently, clicking on either panel opens the same set of text (The first drop panel). My goal is for each panel to operate independently. Any suggestions would be highly appreciated. Thank you!