Prevent form submit button from closing slide toggled list element
<p>I have a form inside a list element. The form, wrapped inside an list item is hidden by default and made visible by clicking on a button which invokes slideToggle giving the list an inline class of 'display: list-item'. When the user clicks on the form's submit button it has the undesired effect of closing the li container as its strips out the inline style created by the slideToggle function. I need the list element warping the form to remain visible i.e dispaly: list-item.</p>

<p>The html structure is as follows</p>

<pre><code>&lt;ul class="contact"&gt;
   &lt;li&gt;class="gravity-form"&gt;
   &lt;div&gt;
      &lt;form&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div class="gform_footer left_label"&gt;
        &lt;input type="submit" id="gform_submit_button_1" class="button gform_button"
        value="Submit" tabindex="5"&gt;
        &lt;/div&gt;           
      &lt;/form&gt;
   &lt;/div&gt;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>My fruitless efforts so far have been to try to re-instate the inline class display: list-item with:</p>

<pre><code>$('#gform_submit_button_1').bind('click', function(event) {
$(this).prevUntil('ul.contact').children()
    .find('li.gravity-form').css('display' , 'list-item');    
  });
</code></pre>

<p>I'm not sure if this is the correct direction and if my selectors are going the right way. I did try an event preventDefault but this obviously prevents the form from submitting. Any ideas? Many thanks.</p>
