By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,956 Members | 1,657 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,956 IT Pros & Developers. It's quick & easy.

Accordion Form help

nomad
Expert 100+
P: 664
Hello everyone:

I need some help with the form Accordion

It will not close not sure how to solve it any help would be great. Should I be using dl dt ?

Note when you click the arrow button the form info will not close.

Here is my code.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Accordion 1</title>
  6.  
  7. <script type="text/javascript" src="jquery.js"></script>
  8.  
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.  
  12.     $(".accordion h3:first").addClass("active");
  13.     $(".accordion p:not(:first)").hide();
  14.  
  15.     $(".accordion h3").click(function(){
  16.         $(this).next("p").slideToggle("slow")
  17.         .siblings("p:visible").slideUp("slow");
  18.         $(this).toggleClass("active");
  19.         $(this).siblings("h3").removeClass("active");
  20.     });
  21.  
  22. });
  23. </script>
  24.  
  25. <style type="text/css">
  26. body {
  27.     margin: 10px auto;
  28.     width: 570px;
  29.     font: 75%/120% Arial, Helvetica, sans-serif;
  30. }
  31. .accordion {
  32.     width: 400px;
  33.     border-bottom: solid 1px #c4c4c4;
  34. }
  35. .accordion h3 {
  36.     background: #e9e7e7 url(arrow-square.gif) no-repeat right -51px;
  37.     padding: 7px 15px;
  38.     margin: 0;
  39.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  40.     border: solid 1px #c4c4c4;
  41.     border-bottom: none;
  42.     cursor: pointer;
  43. }
  44. .accordion h3:hover {
  45.     background-color: #e3e2e2;
  46. }
  47. .accordion h3.active {
  48.     background-position: right 5px;
  49. }
  50. .accordion p {
  51.     background: #f7f7f7;
  52.     margin: 0;
  53.     padding: 10px 15px 20px;
  54.     border-left: solid 1px #c4c4c4;
  55.     border-right: solid 1px #c4c4c4;
  56. }
  57.  
  58. dl {
  59.  
  60. }
  61.  
  62. dd {
  63.     margin: 0;
  64.  
  65.     padding: 1em 0;
  66. }
  67.  
  68. dt {
  69.     cursor: pointer;
  70.     font-weight: bold;
  71.     font-size : 1.5em;
  72.     line-height: 2em;
  73.     background: #e3e3e3;
  74.     border-bottom: 1px solid #c5c5c5;
  75.     border-top: 1px solid white;
  76. }
  77. </style>
  78. </head>
  79.  
  80. <body>
  81.  
  82. <div class="accordion">
  83.     <h3>About Us</h3>
  84.     <p>Nunc convallis non turpis at posuere. Vivamus viverra eleifend urna, sit amet dictum dui iaculis mattis. Suspendisse elit diam, blandit eget quam vitae, feugiat auctor leo. Suspendisse potenti. Duis id porttitor sem. Nulla facilisi. Vivamus turpis turpis, venenatis et augue eu, luctus consequat tellus. Fusce consectetur non ligula nec semper. Pellentesque mattis, enim imperdiet lacinia placerat, nisl elit pulvinar lorem, nec porta quam dolor vitae diam.<br />
  85.       . <br />
  86.     <a href="./">Read more...</a></p>
  87.  
  88. <h3>Sign Up For Our Newsletter</h3>
  89.     <p> Subscribe for free to our newsletter to keep up with the news, releases, events and more. </p>
  90.   <p>&nbsp;</p>
  91.  
  92. <h3>Contact</h3>
  93. <p>
  94.     Please fill out this form
  95.   </p><dl>
  96.   <dt>
  97.    <form action="contact_us_how_can1.php" method="post" name="contactform" id="contactform">
  98.    <textarea name="comments" cols="45"  rows="6" class="email1" >How can we help you?</textarea>
  99.    <br />
  100.    Your Name:
  101. <input name="Your_name" type="text" class="email1"  value="Full Name" size="35"  />
  102. <br />
  103. Your email:
  104. <input name="email" type="text" class="email1"  value="email@example.com" size="32"  />
  105.  <br />
  106.  <input type="submit" class="message"    value="   Send Message   " />
  107.    </form>
  108.    </dt>
  109.   </dl>
  110.  <p></p>
  111.  
  112. </div>
  113.  
  114. </body>
  115. </html>
  116.  
  117.  
  118.  
Thanks in advance
damon
Mar 7 '14 #1
Share this question for a faster answer!
Share on Google+

Post your reply

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