javascript if class is hidden then scroll

Question

scroll to the item only if the class is hidden or when the form opens up. check out the jsfiddle.

http://jsfiddle.net/jdE2v/93/ Can you take a quick look? This was the closest I could get to.

// toggle and hide all but the form u want to edit
$('[class^="toggle-new-form"]').click(function() {
    var el = $(this).parent().next();
    $('[class^="new-form"]').not(el).addClass('hidden');
    el.toggleClass("hidden");
});

// scroll down to view to see all payment Options
$('.scroll-payment-options').click(function() {
    $('body,html').animate({
        scrollTop: $(".scroll-payment-options").offset().top
    }, 800);
});

Answer 1

Use hasClass to check if the element has the hidden class, like so:

// toggle and hide all but the form u want to edit
$('[class^="toggle-new-form"]').click(function() {
  var el = $(this).parent().next();
  $('[class^="new-form"]').not(el).addClass('hidden');
  el.toggleClass("hidden");
});

// scroll down to view to see all payment Options
$('.scroll-payment-options').click(function() {
  if(!($(this).parent().find('[class^="new-form"]').hasClass('hidden'))){
    $('body,html').animate({
      scrollTop: $(".scroll-payment-options").offset().top
    }, 800);
  }
});

Fiddle