Question

I am using a simple jquery toogle to show and hide a form. What I am trying to do, is when the toggle is in a close position, print an html message. I have tried various ways, but although the message appears, the form does not show. Only the message toggles. How can I overcome this? Many thanks

jQuery("#fld_company").live('click', function() {
              $("#fld_fld").toggle(1000);
        });

+++UPDATE+++

<legend id="fld_company">Select Company</legend>
            <div id="fld_fld">
             <dl>
              <dt>
                <label for="AUSR_companyname" class="opt">Company Name:</label>
              </dt>
              <dd>
                <input id="AUSR_companyname" name="AUSR_companyname" type="text" size="32" maxlength="128" size="32" value = "" />
              </dd>
             </dl>

I have only posted a small section to the html because the markup is identical. There are tags in place also.

Answer 1

I’ve posted a fiddle here with a working solution.

Essentially, the JS is structured like this:

jQuery("#toggler").live('click', function() { /* toggler is the element that triggers the toggling */
    $("#form1").toggle(1000); /* form1 is the form element you want to hide/show */
    $("#formMessage").toggle(1000); /* formMessage is the element you want to display when the form is hidden */
});

A key piece to this code is that you will need to set the visibility of form1 and formMessage to be opposite of each other. So, if you want the form1 element to default as visible, then you should include in your css: #formMessage { display: none; }