Accordion Form help - Javascript

664 Recognized Expert Contributor

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 Reply

1150

Similar topics

2588

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 the internet. I wondered if you can just help me with it? It is just a form that you type your name in on the test_form.php page, and then on...

PHP

1377

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 the form is so lengthy, I would like to aid users by including visual clues as to what fields require information by changing the background color...

Javascript

1759

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 cents. I thought that there was a previous post showing how to do this but my news server doesn't show it. 2. I have a form that is the data entry...

Microsoft Access / VBA

6177

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 (takes all information submitted from the first form state and removes the form elements and displays entered information using "Response.form()".

ASP / Active Server Pages

1329

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 Email Age (option field) -> over 45 or under 45 Sex (option field) -> male or female Comments:

PHP

318

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" enctype="multipart/form-data"> <input class="sidebar" value="name" name="user" >

PHP

1321

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" value="email" name="email" > <TEXTAREA class=sidebar name=content rows=40 cols=30></TEXTAREA> <input class="button_sidebar" value="Send"...

PHP

1899

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 allow the user to type in a value. Also, I would like the 2nd option only editable if the button for that option is selected. All I can seem to...

Javascript

5252

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 OpenQuery named Cust_lukup_Query using the text box(s) input data running in print view mode. The Cust_lukup_Query has the code setup to query the 3 fields...

Microsoft Access / VBA

2764

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 some new ones on. In my code I am doing the following: For Each ctrl In tpMain.Controls If TypeOf (ctrl) Is CheckBox Then If...

Visual Basic .NET

7478

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7410

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7668

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7923

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7773

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

3448

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1901

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1025

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

722

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General