Accordion Form help - Javascript

664 Expert 512MB

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Accordion 1</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">

$(document).ready(function(){
 
    $(".accordion h3:first").addClass("active");

    $(".accordion p:not(:first)").hide();
 
    $(".accordion h3").click(function(){

        $(this).next("p").slideToggle("slow")

        .siblings("p:visible").slideUp("slow");

        $(this).toggleClass("active");

        $(this).siblings("h3").removeClass("active");

    });
 
});

</script>
 
<style type="text/css">

body {

    margin: 10px auto;

    width: 570px;

    font: 75%/120% Arial, Helvetica, sans-serif;

}

.accordion {

    width: 400px;

    border-bottom: solid 1px #c4c4c4;

}

.accordion h3 {

    background: #e9e7e7 url(arrow-square.gif) no-repeat right -51px;

    padding: 7px 15px;

    margin: 0;

    font: bold 120%/100% Arial, Helvetica, sans-serif;

    border: solid 1px #c4c4c4;

    border-bottom: none;

    cursor: pointer;

}

.accordion h3:hover {

    background-color: #e3e2e2;

}

.accordion h3.active {

    background-position: right 5px;

}

.accordion p {

    background: #f7f7f7;

    margin: 0;

    padding: 10px 15px 20px;

    border-left: solid 1px #c4c4c4;

    border-right: solid 1px #c4c4c4;

}
 
dl {
 
}
 
dd {

    margin: 0;
 
    padding: 1em 0;

}
 
dt {

    cursor: pointer;

    font-weight: bold;

    font-size : 1.5em;

    line-height: 2em;

    background: #e3e3e3;

    border-bottom: 1px solid #c5c5c5;

    border-top: 1px solid white;

}

</style>

</head>
 
<body>
 
<div class="accordion">

    <h3>About Us</h3>

    <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 />

      . <br />

    <a href="./">Read more...</a></p>
 
<h3>Sign Up For Our Newsletter</h3>

    <p> Subscribe for free to our newsletter to keep up with the news, releases, events and more. </p>

  <p>&nbsp;</p>
 
<h3>Contact</h3>

<p>

    Please fill out this form

  </p><dl>

  <dt>

   <form action="contact_us_how_can1.php" method="post" name="contactform" id="contactform">

   <textarea name="comments" cols="45"  rows="6" class="email1" >How can we help you?</textarea>

   <br />

   Your Name:

<input name="Your_name" type="text" class="email1"  value="Full Name" size="35"  />

<br />

Your email:

<input name="email" type="text" class="email1"  value="email@example.com" size="32"  />

 <br />

 <input type="submit" class="message"    value="   Send Message   " />

   </form>

   </dt>

  </dl>

 <p></p>
 
</div>
 
</body>

</html>

Thanks in advance
damon

Mar 7 '14 #1

Subscribe Post Reply

1144

Similar topics

form help

by: John | last post by:

Hello. I am a beginner to PHP and I am currently just going through a book, to create a simple form page. Unfortunately it doesn't work, and there is nothing listed on the books errata page on...

PHP

Dynamic Form Help

by: MAFranklin | last post by:

I've created a form with several input fields. At the beginning of my form I use a set of radio buttons to determine how to validate the form as well as determine what fields are required. Because...

Javascript

Data Entry Help and Form Help Please

by: JC Mugs | last post by:

I need help with a project, that has two things driving me crazy. 1. I have number entries that wish to have the data enter from the right, so that when you type in 80, it is .80 or eighty...

Microsoft Access / VBA

ASP/VBScript Form Help

by: hermand | last post by:

I've got an online job application I am building using ASP/VBScript. The application consists of one ASP document which has three separate states. States: 1. Form Display 2. Form Review...

ASP / Active Server Pages

Simple php form Help

by: Juan Antonio Villa | last post by:

Hello All. I'm a newbie in programming and I was wondering if I could get some help from you. I have a form with the following fields: ------------------------------------------------- Name...

PHP

Form Help

by: Hoopster | last post by:

Here is my form that I''m having problems with. I just can't get an e-mail ??? <p><b class="yellow">Contact Us</b></p> <form action="FormToEmail.php" method="post"...

PHP

Form Help Again

by: Hoopster | last post by:

Here is my form. <form action="http://www.johndoe.com/FormToEmail.php" method="post" enctype="multipart/form-data"> <input class="sidebar" value="name" name="user" > <input class="sidebar"...

PHP

Javascript form help

by: drec | last post by:

I am just learning Javascript and I would like to create a basic form that gives me two options. This will be using either checkbox or radio input type, however I would like the second option to...

Javascript

Query by form, help with adding subform

by: ljungers | last post by:

Hi to all and hope someone may have an answer for me. I have a Form named Cust_lukup_Form that has 3 text boxes and a click button that uses a OnClick to call Cust_lukup_Macro that runs an...

Microsoft Access / VBA

How to clear controls from a form - Help Needed

by: =?Utf-8?B?U2l2?= | last post by:

I have a form that I programmatically generate some check boxes and labels on. Later on when I want to draw the form with different data I want to clear the previously created items and then put...

Visual Basic .NET

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing