Jquery a .click then .slideDown div

Question

I have anchor which when you click would slidedown a form within a div, and then click again would slide it back up. Initially I just used .toggle, but now I have multiple anchors and multiple divs with the same class, so I had to rework the code or else anytime you clicked on any of the anchors all the divs would slidedown and you would see 4 forms.

So, I thought I could just rewrite the code with .closest, but it doesn't seem to be working. I think it's because .closest has to go up the DOM hierarchy, so it won't work for my div the way it's laid out. I tried .sibling but that doesn't work either. Any ideas?

  <a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>

  <script>
        $("a.payment-form-show").click(function() {
            var e = $(this).closest("div.payment-form-wrapper");
                    if (e.is(":hidden")) {
                        e.slideDown("slow");
                        $(this).html("Don't Pre-Pay with Credit Card")
                    } else {
                        e.slideUp("slow");
                        $(this).html("Pre-Pay with Credit Card")
                    }
            return false;
        });
    </script>

Answer 1

I think you should wrap your a.payment-form-show and div.payment-form-wrapper inside a div. Like this:

<div>
<a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>
</div>

• When the a tag is clicked, you look for the immediate parent and then find the form:

  $(this).parent().find("div.payment-form-wrapper");

• In this case, the div wrapper serves as the context for your tags. This would create a more maintainable code. Because when you use .next() or some function to look for the .div.payment-form-wrapper, your javascript code is coupled to the current position of the tags. In the future, if you modify the position, or add some tags in between, your code would fail.

Answer 2

Use this...

$(".payment-form-show").on('click', function() {
    $('.payment-form-wrapper').slideToggle('slow');
    if($('.payment-form-wrapper').is('visible')){
        $(this).html("Pre-Pay with Credit Card");
    }else{
        $(this).html("Don't Pre-Pay with Credit Card");
    }
});

An see the DEMO

Answer 3

This code should work even if all the div's have the same class. Check it out:

$(".payment-form-show").on('click', function() {
    var slider = $(this).closest("a").next();

    slider.slideToggle("slow");    
    slider.is(":visible") ? $(this).html("Pre-Pay with Credit Card") : $(this).html("Don't Pre-Pay with Credit Card");
});

Fiddle based off of MG_Bautista's fiddle: http://jsfiddle.net/8b5q5/1/