473,320 Members | 1,950 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Accordion Button (contact form) not working

nomad
664 Expert 512MB
Hello Everyone:

I need some help on resolving a problem. Inside my sytle_buttons.css file there is an code that is blocking input fields in the contact form.
is there away to avoid using the
.ac-container input{
display: none;
}
and still have the site work right.


Thanks in advance
damon

Here is the html code
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6.  
  7.       <link rel="stylesheet" type="text/css" href="css/demo.css" />
  8.         <link rel="stylesheet" type="text/css" href="css/style_buttons.css" />
  9.         <!--<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>-->
  10.     </head>
  11.  
  12.  
  13. <body>
  14.  
  15.   <!-- Codrops top bar --><!--/ Codrops top bar -->
  16.     <section class="ac-container">
  17.           <div>
  18.       <input id="ac-3" name="accordion-1" type="checkbox" />
  19.       <label for="ac-3">Sign up for our Newsletter</label>
  20.         <article class="ac-large">
  21.           <p>Subscribe for free to our newsletter to keep up with the news, releases, events and more. <br>
  22.  
  23.           </p>
  24.         </article>
  25.       </div>
  26.  
  27.  
  28.       <div>
  29.        <input id="ac-4" name="accordion-1" type="checkbox" />
  30.       <label for="ac-4">Contact Us</label>
  31.         <article class="ac-large">
  32.           <p>The Light Laboratory staff is available to serve you with answers and solutions.
  33.  
  34.  
  35.  
  36.           </p><table width="432">
  37.   <form action="contact_us_how_can1.php" method="post" name="contactform" id="contactform">
  38.     <tr>
  39.       <td width="22" ></td>
  40.       <td width="553"  height="40"><textarea name="comments" cols="48"  rows="6" class="email1" >How can we help you?</textarea></td>
  41.     </tr>
  42.     <tr>
  43.       <td width="22" height="40">&nbsp;</td>
  44.       <td >Your Name:
  45.         <input name="Your_name" type="text" class="email1" value="Full Name" size="35"></td>
  46.     </tr>
  47.     <tr>
  48.       <td width="22"  height="40">&nbsp;</td>
  49.       <td>Your email:
  50.         <input name="email" type="text" class="email1" value="email@example.com" size="32"></td>
  51.     </tr>
  52.     <tr>
  53.       <td width="22"  height="40">&nbsp;</td>
  54.       <td  height="40"><input type="submit" class="message"    value="   Send Message   " /></td>
  55.     </tr>
  56.     <tr>
  57.     </tr>
  58.   </form>
  59. </table>
  60.         </article>
  61.       </div>   
  62.  
  63.  
  64.     </section>
  65.  
  66.   </body>
  67. </html>
Here is the style_button.css code
Expand|Select|Wrap|Line Numbers
  1. .ac-container{
  2.     width: 450px;
  3.     text-align: left;
  4.     margin-top: 0px;
  5.     margin-right: 0px;
  6.     margin-bottom: 0px;
  7.     margin-left: 0px;
  8. }
  9. .ac-container label{
  10.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  11.     padding: 5px 20px;
  12.     position: relative;
  13.     z-index: 20;
  14.     display: block;
  15.     height: 30px;
  16.     cursor: pointer;
  17.     color: #777;
  18.     text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  19.     line-height: 33px;
  20.     font-size: 19px;
  21.     background: #ffffff;
  22.     background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
  23.     background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
  24.     background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  25.     background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  26.     background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  27.     background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  28.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
  29.     box-shadow: 
  30.         0px 0px 0px 1px rgba(155,155,155,0.3), 
  31.         1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
  32.         0px 2px 2px rgba(0,0,0,0.1);
  33. }
  34. .ac-container label:hover{
  35.     background: #fff;
  36. }
  37. .ac-container input:checked + label,
  38. .ac-container input:checked + label:hover{
  39.     background: #c6e1ec;
  40.     color: #3d7489;
  41.     text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
  42.     box-shadow: 
  43.         0px 0px 0px 1px rgba(155,155,155,0.3), 
  44.         0px 2px 2px rgba(0,0,0,0.1);
  45. }
  46. .ac-container label:hover:after,
  47. .ac-container input:checked + label:hover:after{
  48.     content: '';
  49.     position: absolute;
  50.     width: 24px;
  51.     height: 24px;
  52.     right: 13px;
  53.     top: 7px;
  54.     background: transparent url(../images/arrow_down.png) no-repeat center center;    
  55. }
  56. .ac-container input:checked + label:hover:after{
  57.     background-image: url(../images/arrow_up.png);
  58. }
  59. .ac-container input{
  60.     display: none;
  61. }
  62. .ac-container article{
  63.     background: rgba(255, 255, 255, 0.5);
  64.     margin-top: -1px;
  65.     overflow: hidden;
  66.     height: 0px;
  67.     position: relative;
  68.     z-index: 10;
  69.     -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  70.     -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  71.     -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  72.     -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  73.     transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  74.     width: 450px;
  75. }
  76. .ac-container article p{
  77.     font-style: italic;
  78.     color: #777;
  79.     line-height: 20px;
  80.     font-size: 14px;
  81.     padding: 20px;
  82.     text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  83. }
  84. .ac-container input:checked ~ article{
  85.     -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  86.     -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  87.     -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  88.     -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  89.     transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  90.     box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
  91. }
  92. .ac-container input:checked ~ article.ac-small{
  93.     height: auto;
  94.  
  95.  
  96. }
  97. .ac-container input:checked ~ article.ac-medium{
  98.     height: auto;
  99.  
  100. }
  101. .ac-container input:checked ~ article.ac-large{
  102.     height: auto;
  103.  
  104. }
  105.  
Here is the demo code
Expand|Select|Wrap|Line Numbers
  1. @font-face {
  2.     font-family: 'BebasNeueRegular';
  3.     src: url('fonts/BebasNeue-webfont.eot');
  4.     src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
  5.          url('fonts/BebasNeue-webfont.woff') format('woff'),
  6.          url('fonts/BebasNeue-webfont.ttf') format('truetype'),
  7.          url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }
  11. table {
  12.     border-collapse:collapse;
  13.     border-spacing:0;
  14. }
  15. fieldset,img { 
  16.     border:0;
  17. }
  18. address,caption,cite,code,dfn,th,var {
  19.     font-style:normal;
  20.     font-weight:normal;
  21. }
  22. ol,ul {
  23.     list-style:none;
  24. }
  25. caption,th {
  26.     text-align:left;
  27. }
  28. h1,h2,h3,h4,h5,h6 {
  29.     font-size:100%;
  30.     font-weight:normal;
  31. }
  32. q:before,q:after {
  33.     content:'';
  34. }
  35. abbr,acronym { border:0;
  36. }
  37. section, header{
  38.     display: block;
  39. }
  40. /* General Demo Style */
  41. body{
  42.     font-family: Cambria, Palatino, Georgia, serif;
  43.     background: #e0e3ec url(../images/bgnoise_lg.jpg) repeat top left;
  44.     font-weight: 400;
  45.     font-size: 15px;
  46.     color: #393b40;
  47.     overflow-y: scroll;
  48. }
  49. a{
  50.     color: #333;
  51.     text-decoration: none;
  52. }
  53. .container{
  54.     width: 100%;
  55.     position: relative;
  56.     text-align: center;
  57. }
  58. .clr{
  59.     clear: both;
  60. }
  61. .container > header{
  62.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  63.     padding: 20px 30px 10px 30px;
  64.     margin: 0px 20px 10px 20px;
  65.     position: relative;
  66.     display: block;
  67.     text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  68.     text-align: center;
  69. }
  70. .container > header h1{
  71.     font-family:  Arial, sans-serif;
  72.     font-size: 35px;
  73.     line-height: 35px;
  74.     position: relative;
  75.     font-weight: 400;
  76.     color: #3d7489;
  77.     text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  78.     padding: 0px 0px 5px 0px;
  79. }
  80. .container > header h1 span{
  81.     color: #80B8CE;
  82.     text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
  83. }
  84. .container > header h2{
  85.     font-size: 16px;
  86.     font-style: italic;
  87.     color: #82858e;
  88.     text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
  89. }
  90.  
Mar 11 '14 #1
0 1487

Sign in to post your reply or Sign up for a free account.

Similar topics

9
by: Jason | last post by:
I'm struggling with this email code and I'm not php freak since I'm starting to learn php stuff. Could use some help... It seems that I get too many parse errors all over and cannot figure went...
18
by: Stephanie | last post by:
I tried to create an email/contact form but i'am stuck. (i'am a php-newbie) Let me explain (sorry for my bad english, it's not my native language) I have a form with the required fields and the...
0
by: Benjamin Bittner | last post by:
Hallo NG, ive searched a lot in some google groups, and found many threads, but nothing that helped me. Here is the scenario: I have an aspx page which loads a user control in page.onInit like...
3
by: John | last post by:
What is the easiest way to make the contact form show on the front page. Meaning on want to keep the front html page and when someone clicks on the contact us link the front page remains the same,...
0
by: kammaldeep | last post by:
hi, i m newbie 2 PHP & to b frank ... will alwaz be ... i dont think i will go into much details with PHP as my work doesnot include workin with PHP bt i have a forum .. and i want to make a...
12
by: colt28 | last post by:
Ok so I found an ajax contact form script but i can't get the b****** to work. I made a bunch of alterations to it and it didn't work so i replaced everything with the original and it still didn't...
6
by: tamjames75 | last post by:
Hi there, I'm new to javascript and am looking for a solution to my problem, I am creating a site for a property company and they want a enquire button next to each property and when clicked it...
4
by: luke noob | last post by:
This is my HTML... <head> <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body>
0
by: jake hathaway | last post by:
hello , i am getting this error message "At least one of the From or Sender fields is required, and neither was found." i have added a contact form all the details are correct as far as i no...
2
by: roger towers | last post by:
I have a contact form that submits into a mySQL db, sanitizes it and emails it as well. It was working correctly but I am trying to add this bit of code that will check the DB for the users IP,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.