Question

onI have the following html structure:

<div>
<ul>
    <li class="gravity-form"></li>
    <li class="gravity-form-divider"></li>
</ul>
</div>
<div>
<a href="#" class="btn enquire"></a>
</div>

With a click on ‘a.btn.enquire’ I’d like the following to happen; invoke slideToggleClass on li.gravity-form followed by ToggleClass on li.gravity-form-divider. Something along the lines of:

$('a.btn.enquire').bind('click' , function(event){
$(this).prevUntil('ul').next(li.gravity-form').slideToggle();
return false;
)};

Any thgoughts how to go about this?

Many thanks

Answer 1

I dont exactly sure why exactly you want to do like that but i am changing the code to work as you are expecting:

$('a.btn.enquire').live('click' , function(event){
  $(this).parent().prev().find('li.gravity-form').slideToggle(function(){
        $(this).next('li.gravity-form-divider').slideToggle();
    });
});

example : http://jsfiddle.net/SpU8y/2/

Start using on instead of bind since it is deprecated in jquery 1.7