On Click Of Button, Append Form, Slide Down And Slide Up On Second Click

I'm trying to get a form element to slide down under a div on click of button contained within that div. When you click the button again, I want the form to slideUp(); So my HTML

Solution 1:

Likely you do not add another, but toggle the slide on third click? Need to hide the new form to allow the slideDown, cache the cell selector for reuse.

$(".enquiry-button").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    var cell = $(this).closest('.cell');
    if (cell.find('.enquiry-form').length) {
        cell.find('.enquiry-form').slideToggle();
    } else {
        cell.append(
            "<divclass='enquiry-form'>" +
            "<form>" +
            "Your Email: <inputtype='text'name='email'>" +
            "First name: <inputtype='text'name='firstname'>" +
            "<br>Last name: <inputtype='text'name='lastname'>" +
            "<br>Contact No: <inputtype='text'name='lastname'>" +
            "<br>Postcode: <inputtype='text'name='postcode'>" +
            "<br>Optional Comment: <inputtype='textarea'name='comment'>" +
            "<inputtype='submit'value='Submit'>" +
            "</form>" +
            "</div>");
        cell.find('.enquiry-form').hide().slideDown("slow");
    }
});

sample in action: http://jsfiddle.net/GMjNS/

NOTE per late comment, if you use dynamic elements, change the first line to:

$(document).on("click", ".enquiry-button", function (e) {

If you have 0 elements, it will not have a clickable item so that should be OK. Note that you should NOTE bind to the document but instead use a closer wrapper (like a div wrapper etc.) to bind to: example

$('#mywrapperelementid').on("click", ".enquiry-button", function (e) {

Solution 2:

You were very near... What you missed out here, is that , once you click on a div , you are constructing a form element . Before you click the element length will be 0, after you click the length will start increasing. Based on that, you can toggle the slider.

<divclass='cell'><divclass='enquiry-button'>Enq1</div></div><divclass='cell'><divclass='enquiry-button'>Enq2</div></div><divclass='cell'><divclass='enquiry-button'>Enq3</div></div>

JS :

    $( ".enquiry-button" ).click( function(e) {

e.preventDefault();
e.stopPropagation();
alert("length::"+$(this).parents('.cell').find('form').length);
if($(this).parents('.cell').find('form').length==0){
$(this).closest( '.cell' ).append(
"<div class='enquiry-form'>" +
"<form>" +
    "Your Email: <input type='text' name='email'>" +
    "First name: <input type='text' name='firstname'>" +
    "<br>Last name: <input type='text' name='lastname'>" +
    "<br>Contact No: <input type='text' name='lastname'>" +
    "<br>Postcode: <input type='text' name='postcode'>" +
    "<br>Optional Comment: <input type='textarea' name='comment'>" +
    "<input type='submit' value='Submit'>"+
"</form>" +
"</div>");

$(this).closest( '.cell' ).find(".enquiry-form:last").slideDown("slow");
}else{
$(this).closest( '.cell' ).find(".enquiry-form:last").slideToggle("fast");
}
});

Find the fiddle Here : http://jsfiddle.net/JPUTy/5/

You can see that i have an alert here , which gives the length of the form after every click, which will make it easier for you to understand what's happening in the background.

Solution 3:

Check wether the clicked element's parent has a form child or not, if it has, slideToggle() !

Live Demo

JavaScript/JQuery

$(".enquiry-button").click(function (e) {

    e.preventDefault();
    e.stopPropagation();

    if (!$(this).parents('.cell').find('form').length) {
        $(this).closest('.cell').append(
            "<div class='enquiry-form'>" +
            "<form>" +
            "Your Email: <input type='text' name='email'>" +
            "First name: <input type='text' name='firstname'>" +
            "<br>Last name: <input type='text' name='lastname'>" +
            "<br>Contact No: <input type='text' name='lastname'>" +
            "<br>Postcode: <input type='text' name='postcode'>" +
            "<br>Optional Comment: <input type='textarea' name='comment'>" +
            "<input type='submit' value='Submit'>" +
            "</form>" +
            "</div>");


        $(this).closest('.cell').find(".enquiry-form:last").slideDown("slow");
    } else $(this).closest('.cell').find(".enquiry-form:last").slideToggle("slow");


});

CSS

.enquiry-form {
    display:none;
}

Solution 4:

You can add some class to .cell after first click and remove class after second click:

    $(".enquiry-button").click(function (e) {
        var$this = $(this),
            $parent = $this.parent();

            if (!$parent.hasClass('opened')) {

                if (!$parent.find('form').length) {
                    $parent.append('<form>Input: <input type="text"/></form>');
                }

                $parent.addClass('opened');
            } else {
                $parent.removeClass('opened');
            }
    });

Example: http://jsfiddle.net/uNwLn/

Solution 5:

Here is working example if you only want one form opened at the time.

jQuery:

$('.enquiry-button').click(function(e){
    $('.cell .enquiry-form:visible').slideUp('slow', function(){
         $(this).remove();
    });

    if( $(this).parent('.cell').hasClass('active') )
    {
        $(this).parent('.cell').removeClass('active');
    }
    else
    {
        $('.cell').removeClass('active');
        $(this).parent('.cell').addClass('active');

        $('.cell.active').append("<div class='enquiry-form'>" +
    "<form>" +
    "Your Email: <input type='text' name='email'>" +
    "First name: <input type='text' name='firstname'>" +
    "<br>Last name: <input type='text' name='lastname'>" +
    "<br>Contact No: <input type='text' name='lastname'>" +
    "<br>Postcode: <input type='text' name='postcode'>" +
    "<br>Optional Comment: <input type='textarea' name='comment'>" +
    "<input type='submit' value='Submit'>"+
    "</form>" +
"</div>");

        $('.cell.active .enquiry-form').hide().slideDown('slow');
    }
});