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.