Contact Form with CSS Drop Down - Non-Responsive - html

Question

I'm working with an AJAX Wordpress theme but the problem is not within the theme, to my knowledge, but with the codes I've added.
I'm using "Contact-Form-7" for a special drop-down box. I'm using it to create an easy access form for submission.
I've used these lines of code before but the problem that I'm having is the box will not show up when the button is clicked. Below is two links & the source code I used. Link 1 is the Ajax site where I'm adding this form. Link 2 is the same form that we've done but it works just fine. The button is at the top and it read's "request an appointment".
Link 1: http://www.geigerandwood.com
Link2: http://www.tobiasdental.com
Lines of code in the header:
<!-- BEGIN: FREE Estimates Form -->
<div class="center-wrap">
<section id="drop-down-content">
<h1>Request an Appointment</h1>
<?php echo do_shortcode('[contact-form-7 id="173" title="Drop Down"]'); ?>
</section>
<section id="drop-down">
<a id="drop-down-toggle">Request an Appointment</a>
</section>
</div>
<!-- END: FREE Estimates Form -->
Lines of code in the CSS:
/* Free Estimates Drop Down Box */
body #drop-down {
transition: top 0.5s;
-moz-transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
width: 700px;
background-color: #333333;
position: absolute;
top: -30px;
left: 0;
z-index: 10000;
padding: 20px 0 10px 0; }
body #drop-down-content:after{
content: "";
position: absolute;
top: -7px;
left: 133px;
width: 15px;
height: 7px;
background: url("images/dark-arrow-up.png") no-repeat 0 0;
}
body #drop-down form {
zoom: 1;
clear: both; }
body #drop-down form:before, body #drop-down form:after {
content: "";
display: block; }
body #drop-down form:after {
clear: both; }
body #drop-down div {
width: 250px;
float: left;
margin-right: 25px; }
body #drop-down div input{
width: 250px;
}
body #drop-down label {
display: block;
color: #eeeeee;
margin-bottom: 10px;
font-style: italic;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); }
body #drop-down textarea {
height: 85px;
float: left;
margin-right: 25px; }
body #drop-down button {
float: left;
margin-left: 0;
font-size: 18px;
padding: 8px;
margin-top: 45px; }
body #drop-down.open {
top: 0; }
body #drop-down-toggle {
display: block;
text-indent: -9000px;
overflow: hidden;
background: url("images/topper_btn.png") no-repeat 0 0;
width: 243px;
height: 45px;
cursor: pointer;
position: absolute;
bottom: -44px;
right: 0; }
body #drop-down-content{
position: absolute;
display: none;
left: 440px;
top: 50px;
background-color: #333333;
padding: 18px;
border-radius: 5px;
z-index: 10000;
color: #fff;
font-weight: bold;
font-size: 14px;
}
body #drop-down-content input[type="text"]{
color: #521306;
font-size: 14px;
font-weight: bold;
font-family: "Swiss 721", Helvetica;
border: 3px solid #c5d0d7;
border-radius: 2px;
width: 247px;
}
body #drop-down-content input[type="file"]{
color: #521306;
font-size: 14px;
font-weight: bold;
font-family: "Swiss 721", Helvetica;
border: 3px solid #c5d0d7;
border-radius: 2px;
width: 247px;
}
body #drop-down-content p{
margin-top: 13px;
}
body #drop-down-content .wpcf7-submit{
background-color: #521306;
color: #fff;
float: right;
padding: 7px 12px;
font-size: 14px;
width: auto;
border: 0;
cursor: pointer;
}
/* Free Estimates Drop Down Box END */
In the code above, this is the following that is to be added automatically in the "section id='drop-down-content'" when the button is pressed:
<section id="drop-down-content" style="display: none;"> <!--button is not clicked-->
<section id="drop-down-content" style="display: block;"> <!--button is clicked-->
This only problem I'm having is to get this to perform that very action. I'm lost as to what I am missing. Any help would be appreciated.

Answer 1

In your dentist website there is a script named "application-ck.js" in which script is there to show-hide "drop-down-content" div. But there is no such click event for "geigerandwood.com" top form.