CSS or Jquery for Tab Accordion for Contact Form

Question

I have a interface plan design like this:

I've googled it and find a keyword: accordion, but I can't use it because many example is only like this:

jsfiddle.net/charlescarver/E9TeB/2/

. Anyone know how to create that design? So when I click the button (which is an image), it will changed the textbox to another textbox/textarea and also if its a textarea it will be get higher and the button will automatically go down too (take a look at this image)

Answer 1

You could throw together something like this using data attributes, and selectively hiding/showing fields based on each control clicked. For example, if you had a form .mainForm where fields were stored inside a container .fields, and controls were in a container .controls, identified by data attributes like data-id and data-for, you might have a jQuery script like:

$(document).ready(function () {
    $(".mainForm .controls > *").on("click", function(e){
        var matchingInput = $(this).data("for");

        // Showing/hiding fields as needed
        $(".mainForm .fields > *").each(function(){            
            if ($(this).data("id") == matchingInput){
                $(this).show();
            }
            else{
                $(this).hide();
            }
        });
    });
});

This script obtains the data-for of the control, then goes through each field and checks to see if it matches their data-id. If it's a match, show the field - otherwise, hide it. This will cause items below the field (the controls and the form submit button) to be pushed down accordingly, which is what you seem to want. The layout can be achieved in a variety of ways, both in terms of structure and CSS. Mainly, you'll want to think about using float or display:inline-block to get the image lined right next to the form.

Here's a JSFiddle with the script in action, and an example of how you might approach the layout of the form. I left it as general as I could, so it'll look rather plain. Change the CSS as needed, or even create a new layout - as long as you use the same basic nesting for controls/fields and data attributes, the script logic should still work.

Hope this helps! Let me know if you have any questions.