<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<aside class="contact-section">
<div class="accordion" style="z-index:9999">
<div class="panel contact-panel">
<div class="panel-heading accordion-toggle collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#fff!important;">
<span><h5 style="margin-bottom:0!important;"><i class="fa fa-envelope"> </i>Contact Us today to get a quote </h5></span>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form class="form-horizontal" role="form" method="post" id="contactForm" name="contactForm">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="" autocomplete="off" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="" autocomplete="off" required>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-3 control-label">Message</label>
<div class="col-sm-9">
<textarea class="form-control" rows="4" name="message" required placeholder="Message Content Here" autocomplete="off" value=""></textarea>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-3 control-label">Are You <u><strong>Human</u>?</strong></label>
<div class="col-sm-9">
<input id="field_human" class="field_human has-error" type="checkbox" required name="human" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning btn-block btn-lg" role="button" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Cancel
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</aside>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Custom Bootstrap Accordion Contact form with <code>$(Document).onclick</code> toggle<br><small>See Form for details</small></h1>
<p class="lead blog-description">This is just some content I copied from bootstrap for asthetics and to show how the <code>accordion form</code> integrates with bootstrap by default</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre class="prettyprint"><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a class="github-social" href="https://github.com/blayderunner123"> <i class="fa fa-lg fa-github"> </i>GitHub</a></li>
<li><a class="twitter-social" href="https://twitter.com/soldierupdesign"> <i class="fa fa-lg fa-twitter"> </i>Twitter</a></li>
<li><a class="facebook-social" href="https://www.facebook.com/soldierupdesigns"> <i class="fa fa-lg fa-facebook"> </i>Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
*, *:before, *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
width: 100%;
height: 100%;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow-x:hidden;
}
html {
width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family:"octin-stencil", sans-serif;
font-style:normal;
font-weight:800;
letter-spacing:1px;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
.accordion{
width:50%;
position:fixed;
bottom:0;
margin-bottom:0;
padding-bottom:0;
}
#demoform{
width:50%;
float:right;
margin-right:1%;
padding-right:1%;
}
.accordion label{
color:#fff;
}
.accordion input{
border-radius:0;
}
.panel-heading,
.panel-heading:hover,
.panel-heading:focus,
.panel-heading.focus,
.panel-heading:active,
.panel-heading.active{
cursor:pointer;
background-color: #c9302c;
border-color: #ac2925;
outline:none;
}
.panel-heading span h5{
margin-top:-.5%;
}
.accordion-toggle{
text-align:center;
}
.accordion .panel-heading span:after{
/* symbol for "opening" panels */
font-family: 'FontAwesome';
/* essential for enabling glyphicon */
content:"\f078";
color: white;
text-align:right;
float:right;
vertical-align:middle;
margin-top:-3%;
font-weight:700;
font-size:120%;
}
.accordion .collapsed span:after{
/* symbol for "collapsed" panels */
content:"\f077";
}
.contact-panel{
border-radius:0;
background-color: #d9534f;
border-color: #d43f3a;
margin-bottom:0;
position:fixed;
bottom:0;
width:100%;
}
.btn{
box-shadow: inset 0 0 0 2px #fff;
-moz-box-shadow: inset 0 0 0 2px #fff;
-webkit-box-shadow: inset 0 0 0 2px #fff;
border-radius:0 !important;
}
.btn-dark{
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active{
color: #fff;
background-color: rgba(0,0,0,0.7);
}
/*
========================================
=========CUSTOM BOOTSTRAP FORM==========
========================================
*/
form{
padding:2%;
background:#c9302c;
margin-top:-2%;
}
label{
color:#fff;
}
/* Customize the ./Form-control DIVs */
.form-control{
background-color: #990000!important;
background-image: none;
border:none;
border-radius: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
color:#inherit!important;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
/* Set the Form Control style on Hover ONLY */
.form-control:hover{
border-color: rgba(255,00,00,0.75);
background-color: #ff0000!important;
background-image: none;
color:#inherit!important;
-webkit-box-shadow: 0 0 10px rgba(255,00,00,0.8);
-moz-box-shadow: 0 0 10px rgba(255,00,00,0.8);
box-shadow: 0 0 10px rgba(255,00,00,0.8);
}
/* Set the Form Control style on Focus ONLY */
.form-control:focus{
border-color: rgba(22,22,22,.75);
outline: 0;
outline: thin dotted 9;
background: #fff!important;
color:#333!important;
-webkit-box-shadow: 0 0 8px rgba(22,22,22,.6);
-moz-box-shadow: 0 0 8px rgba(22,22,22,.6);
box-shadow: 0 0 8px rgba(22,22,22,.6);
}
/* Style the Form < Input > placeholder for WebKit browsers */
::-webkit-input-placeholder{
color: #fff!important;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder for Mozilla Firefox 4 to 18 */
.form-control:-moz-placeholder{
color: #fff!important;
opacity: 1;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder for Mozilla Firefox 19+ */
::-moz-placeholder{
color: #fff!important;
opacity: 1;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder for Internet Explorer 10+ */
:-ms-input-placeholder{
color: #fff!important;
font-weight:800;
text-transform:uppercase;
}
/*
========================================
=========FORM CONTROL ON FOCUS==========
========================================
*/
/* Style the Form < Input > placeholder on focus for WebKit browsers */
:focus::-webkit-input-placeholder{
color: #333!important;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder on focus for Mozilla Firefox 4 to 18 */
.form-control:focus:-moz-placeholder{
color: #333!important;
opacity: 1;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder on focus Mozilla Firefox 19+ */
:focus::-moz-placeholder{
color: #333!important;
opacity: 1;
font-weight:800;
text-transform:uppercase;
}
/* Style the Form < Input > placeholder on focus Internet Explorer 10+ */
:focus:-ms-input-placeholder{
color: #333!important;
font-weight:800;
text-transform:uppercase;
}
/* Set Text Type appearance to textfield */
[type="text"]{
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
color:#333;
}
.container-form .checkbox{
margin-top: -15px;
}
.container-form .btn{
background-color: #222222;
border-color: #222222;
color: #ffffff;
border-radius: 0;
font-size: 18px;
line-height: 1.33;
padding: 10px 16px;
width: 100%;
box-shadow: inset 0 0 0 2px #fff;
}
/*Set Styling for Form-control < Button ./btn > */
.container-form .btn:hover,
.container-form .btn:focus{
background: #ffffff;
border-color: #ededed;
box-shadow: inset 0 0 0 2px #222;
color:#222;
-webkit-transition: background .8s ease-in-out;
-moz-transition: background .8s ease-in-out;
-ms-transition: background .8s ease-in-out;
transition: background .8s ease-in-out;
}
@media(min-width: 1024px){
.contact-panel{
width:50%;
}
}
.facebook-social .fa,
.facebook-social,
.twitter-social .fa,
.twitter-social,
.github-social .fa,
.github-social{
color:#000;
}
.facebook-social:hover,
.facebook-social:focus,
.facebook-social:hover .fa,
.facebook-social:focus .fa{
background: rgb(57, 83, 137);
text-decoration: none;
color:#fff;
}
.twitter-social:hover,
.twitter-social:focus,
.twitter-social:hover .fa,
.twitter-social:focus .fa{
background: rgb(77, 144, 254) !important;
text-decoration: none;
color:#fff;
}
.github-social:hover,
github-social:focus,
.github-social:hover .fa,
github-social:focus .fa{
background: rgb(75, 75, 75);
text-decoration: none;
color:#fff;
}
/*Blog CSS*/
/*
* Override Bootstrap's default container.
*/
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
pre.prettyprint {
border: 1px solid #ccc;
margin-bottom: 0;
padding: 9.5px;
}
/*!
* accordionForms.js - Bootstrap Accordion Hover and Click Event form toggle attribute
* Version: v1.5.7
* LGPL v3 LICENSE INFO
* This file is part of a Bootstrap Form Element. Copyright
* 2015 Soldier-up Designs - Website Development Company.
* accordionForms.js is a free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* accordionForms.js is distributed as a free tool that can help you
* add a few extra dynamics to your Web Design code. However,
* this code and any associated code "IS" "WITHOUT ANY WARRANTY";
* without even the implied warranty of "MERCHANTABILITY" or
* "FITNESS FOR A PARTICULAR PURPOSE". See the GNU Lesser
* General Public License for more details.
* to download source navigate to: http://soldierupdesigns.com/js/bootstrap-accordion.js
*/
/*!
==================== Code Starts Below ======================
*/
//return all check-boxes and unchecked
var checkboxes = document.getElementsByTagName('input');
//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++)
{
//If the input is a check-box run script else skip over
if (checkboxes[i].type == 'checkbox')
{
//If it is a check-box ensure the box is unchecked
checkboxes[i].checked = false;
}
}
$(document).ready(function()
{
//define Element by ID and create variable
var $checked = $('#field_human');
//define default state for attribute before handler function trigger
$("#submit").attr("disabled", !$checked.checked)
//On element handler trigger define function to execute each time handler is triggered
$checked.click(function()
{
//State to define instance on method
if ($checked.prop('checked'))
{
//return true
//remove element attribute state 'disabled'
$('#submit').removeAttr('disabled');
}
else
{
//return false
//set element attribute state 'disabled'
$("#submit").attr("disabled",!$checked.checked);
}
//return to ready-state to wait for handler to trigger again
return;
});
/*$(document).on('click',function(e)
{
e.stopPropagation();
e.preventDefault();
console.log("document.click");
// stop document click event from firing collapse('show') event
});*/
//On Element jQuery mouseenter Event '.accordion' show '#collapseOne'
$('.accordion').on('mouseenter', function()
{
//Fire the Event
$('#collapseTwo').collapse('show');
return false; //Same as 'e.preventDefault();'
});
$('.accordion').on('click', function(e)
{
//Parent and Siblings => show (override document Click event)
$(this + siblings).collapse('hide', false);
//stop the code from bubbling up
e.preventDefault();
});
//Document Click Event hide '#collapseTwo'
$(document).on('click', function(e)
{
// Target => collapse('hide').collapse('toggle')
if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0)
{
$('#collapseTwo').collapse('hide');
}
//stop the code from bubbling up
e.stopPropagation();
});
});
