Question

Is there a way that I can make a div push the content below it when it is in the show state. What is happening at the moment, is that when i tick the checkbox, the textarea covers the submit button thus hiding it. Is there a way so the textarea can push the button down? I have placed my code here:

http://jsfiddle.net/JUcye/

and I think that if you try it you will see what I mean. Also, what is the way to control the speed that the div is displayed. Many thanks

Answer 1

Add the following rule to your stylesheet:

.contactmessage {
  float: left;
}

To make your div fade in over a time, change

$('input[name="messagetick"]').click(function() {
  $('.contactmessage').toggle(this.checked);
}); 

to

$('input[name="messagetick"]').click(function() {
  if ($(this).is(':checked')) {
    $('.contactmessage').fadeIn(250); // fade in over 250 miliseconds
  } else {
    $('.contactmessage').fadeOut(250); // fade out over 250 miliseconds
  }
});