How to hide/show form using jQuery in following scenario?

Question

I'm using Smarty, Php and Jquery for my website. When the page loads the following form should not be displayed. When user clicks on a hyperlink given below it should get dsiplayed and if user wants to hide the form again he will click on the same hyperlink to hide the above form. In short on formload the form shouldn't be displayed and upon clicking on hyperlink the form should be displayed if it is open and should be closed if it is hidden. Can you help me in achieving this using jQuery? Thanks in advance.

<a class="reply" href="{$control_url}modules/enquiries/reply_to_enquiry.php?contact_id={$data.contact_id}&op=reply&from_date={$from_date}&to_date={$to_date}">Reply</a>

<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
    <ul>
        <li>
            <label>{'To Name'|signal_on_error:$error_msg:'contact_full_name'} :</label>
            <div class="form-element">
                <input type="text" name="contact_full_name" id="contact_full_name" {if $data.contact_full_name!=''} value="{$data.contact_full_name}" {else} value="{$contact_full_name|capitalize}" {/if} class="">
            </div>
        </li>
        <li>
            <label>{'To Email'|signal_on_error:$error_msg:'contact_email_id'} :</label>
            <div class="form-element">
                <input type="text" name="contact_email_id" id="contact_email_id" {if $data.contact_email_id !=''} value="{$data.contact_email_id}" {else} value="{$contact_email_id}" {/if} class="">
            </div>
        </li>
        <li>
            <label>{'Reply'|signal_on_error:$error_msg:'reply'} :</label>
            <div class="form-element">
                <textarea name="reply" id="reply" cols="60" rows="12">{if $error_msg!=""}{$data.reply}{/if}</textarea>
            </div>
        </li>
        <li>
            <label>{'Upload File'|signal_on_error:$error_msg:'reply_file_name'} :</label>
            <div class="form-element">
                <p class="uploadBtn"><input type="file" id="reply_file_name" name="reply_file_name" /></p>
                <div class="input-info"> <span class="required">Note* (Image size should be less then 1 mb and alowed format types are jpg, jpeg, gif, png, JPG, JPEG, GIF, PNG, doc, docx)</span></div>
            </div>
        </li>
        <input type="hidden" name="contact_id" value="{$data.contact_id}" />
        <input type="hidden" name="from_date" value="{$from_date}" />
        <input type="hidden" name="to_date" value="{$to_date}" />
        <input type="hidden" name="op" value="{$op}" />
        <li>
            <label></label>
            <div class="form-element">
                <input type="submit" name="submit" id="submit" class="c-btn" value="Send">
                <input type="button" name="cancel" id="cancel" class="c-btn" value="Cancel" onclick="javascript:window.location.href='{$control_url}modules/enquiries/view_contact_us.php?page={$page}&from_date={$from_date}&to_date={$to_date}'">
            </div>
        </li>                
    </ul>
</form>

Answer 1

For anyone having the same issue :)

$(document).ready(function() {

            $("#manage_reply_enquiry").hide();

            $(".reply").on({
                click: function(){
                    $("#manage_reply_enquiry").toggle();
                }
            });

        });

Answer 2

What about users without JS enabled? This Fiddle may be a more complete solution:

HTML:

<!-- Have the link anchored to the form so it still makes sense for text-only, speech-readers, or users with JS disabled -->
<a class="reply" href="#manage_reply_enquiry">Reply</a>
<form id="manage_reply_enquiry">
    <fieldset>
        <legend>I am Legend</legend>
        <input type="text" name="field" value="a form field" />
    </fieldset>
</form>

JS:

//If JS is enabled add a class so we can hide the form ASAP (and only for JS enabled browsers)
    document.documentElement.className = 'js';

//add the jQuery click/show/hide behaviours (or native JS if you prefer):
    $(document).ready(function(){
        $(".reply").click(function(){
            if($("#manage_reply_enquiry").is(":visible")){
                $("#manage_reply_enquiry").hide();
            } else {
                $("#manage_reply_enquiry").show();
            }
            //don't follow the link (optional, seen as the link is just an anchor)
            return false;
        });
    });

CSS:

.js #manage_reply_enquiry {
    display:none; /* hide for JS enabled browsers */
}
#manage_reply_enquiry {
    /* form styles here */
}

DEMO

Answer 3

method hide(), show() and toggle is expensive(performance). Good method is

var el = $("#someId")
     if (el.style.display=='none'){
         el.style.display='block'
     }else{
         el.style.display='none'
     }

1) you have one request to object! 2) native js is fast

Answer 4

Try:

HTML:

  <div id="someId" style="display: none;">
      <form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="     {$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data">
         //your normal code
      </form>
  </div>

JAVASCRIPT:

  $(document).ready(function(){
     $(".reply").click(function(){
        if($("#someId").css("display") == "none"){
           $("#someId").show();
        } else {
           $("#someId").hide();
        }
     });
  });

hope that helps!

Answer 5

<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data" style="display: none">

In your script

$(".reply:first").click(function() {
      $("#manage_reply_enquiry").toggle();
})

Answer 6

Hide the form initially using css:

#manage_reply_enquiry { display: none; }

Then bind an event handler to a link and toggle the visibility:

$(function(){ //when the DOM is ready

    $('a.reply').click(function(){ //when clicking the link
        $('#manage_reply_enquiry ').toggle();  //toggles visibility
    });

});