subscribe form

by davehol

HTML

<div id="main">
  <p id="centered">
    <a class="toggle" href="#example-fast">Subscribe</a>
  </p>
</div>


<div class="toggle-content show-fast" id="example-fast">
  <div class="row">
   <form method="GET" id="subscribeform" name="subscribeform" onsubmit="return false;" class="form-horizontal">
      <div class="span6">
              <fieldset>
          <legend>Select news categories</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Categories</label>
            <div class="controls">
              <input type="checkbox" name="cat1" value="Technology"> Technology<br>
              <input type="checkbox" name="cat2" value="Business and Entrepreneurship"> Business and Entrepreneurship<br>
              <input type="checkbox" name="cat3" value="Society and Environment" checked> Society and Environment<br>
              <input type="checkbox" name="cat4" value="Art, Design and Culture" checked> Art, Design and Culture<br>
              <input type="checkbox" name="cat5" value="Science"> Science<br>
              <input type="checkbox" name="cat6" value="Health" checked> Health
            </div>
          </div>
        </fieldset>
        <fieldset>
          <legend>Enter your details</legend>
          <div class="control-group">
            <label class="control-label" for="input01">First name</label>
            <div class="controls">
              <input type="text" name="fname" class="input-xlarge" id="input01" required >
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Last name</label>
            <div class="controls">
              <input type="text" name="lname" class="input-xlarge" id="input01" required>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Email address</label>
            <div class="controls">
              <input type="email"...

CSS

.toggle-content {
  display: none;
  height: auto;
  overflow: hidden;
  /* transition: height 350ms ease-in-out;*/
}

.show-fast {
  /*transition: height 350ms ease-in-out;*/
}

.toggle-content.is-visible {
  display: block;
  height: auto;
}

#main {
  height: 50px;
  background: #fac800;
}

#example-fast {
  background: #fac800;
}

#centered {
  text-align: center;
  padding: 20px;
}

fieldset {
  width: 45%;
  float: left;
  margin: 0;
  border: none;
}

.row {
  width: 100%
}

#dave {
  width: 100%;
}

input[type="text"],input[type="email"]{
  width: 90%;
}

JavaScript

// Show an element
/*
var show = function(elem) {
alert("test");
  // Get the natural height of the element
  var getHeight = function() {
    elem.style.display = 'block'; // Make it visible
    var height = elem.scrollHeight + 'px'; // Get it's height
    elem.style.display = ''; //  Hide it again
    return height;
  };

  var height = getHeight(); // Get the natural height
  elem.classList.add('is-visible'); // Make the element visible
  elem.style.height = height; // Update the max-height

  // Once the transition is complete, remove the inline max-height so the content can scale responsively
  window.setTimeout(function() {
    elem.style.height = '';
  }, 350);

};

// Hide an element
var hide = function(elem) {

  // Give the element a height to change from
  elem.style.height = elem.scrollHeight + 'px';

  // Set the height back to 0
  window.setTimeout(function() {
    elem.style.height = '0';
  }, 1);

  // When the transition is complete, hide it
  window.setTimeout(function() {
    elem.classList.remove('is-visible');
  }, 350);

};

// Toggle element visibility
var toggle = function(elem) {

  // If the element is visible, hide it
  if (elem.classList.contains('is-visible')) {
    hide(elem);
    return;
  }

  // Otherwise, show it
  show(elem);

};

// Listen for click events
document.addEventListener('click', function(event) {

  // Make sure clicked element is our toggle
  if (!event.target.classList.contains('toggle')) return;

  // Prevent default link behavior
  event.preventDefault();

  // Get the content
  var content = document.querySelector(event.target.hash);
  if (!content) return;

  // Toggle the content
  toggle(content);

}, false);
*/

/*-------------------------------------------------------------------------------*/


var subscribe = (function() {

  $(".toggle").click(function() {
    $("#example-fast").slideToggle("slow");
  });

  // variable to hold request
  var request;
  // bind to the submit event of our form
 ...