My current javascript code successfully hides and reveals a sign-up form on my website, but I am facing difficulties when trying to implement the same functionality for multiple forms on a single page.
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();jQuery("#reveal").slideToggle(1000);
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
The CSS looks like this:
.rv_button.closed:after {content:"\33";}
.rv_button.opened:after{content:"\32";}
I assigned the class 'rv_button closed' to the triggering button and an ID of 'reveal' to the form itself. However, when I tried applying the same effect to hide and reveal a list of blog posts on the same page, it did not work. I attempted adding IDs to the buttons instead of classes since they are not unique items, but that did not resolve the issue either.
Is there a way to modify the code in order to achieve this desired functionality?