Hi,
Your HTML is not valid as you can't have a <form> inside a <p> tag.
As you have a mix of element types in your accordian I suggest you use
an extra <div> as a wrapper and adjust the jQuery code to operate on
the <div> instead of the <p>.
Something like this:
<div class="accordion">
<h3>Latest news</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
neque vitae odio.<br />
read more about xxx...<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
neque vitae odio.<br />
read more about xxx...</p>
</div>
<h3>Email newsletter</h3>
<div>
<p>Join our email newsletter by completing your details below
and
we'll get you added and keep you updated.</p>
<form id="form1" method="post" action="">
<label>Name
<input type="text" name="textfield" id="textfield" /
>
</label>
<br />
<label>Email
<input type="text" name="textfield2"
id="textfield2" />
</label>
<br />
<label>
<input type="submit" name="button" id="button"
value="Subscribe" />
</label>
</form>
</div>
<h3>Forum</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi
malesuada, ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
neque vitae odio. Vivamus vitae ligula.</p>
</div>
</div>
and JavaScript like this:
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
Paul
On Oct 21, 11:11 am, Steven Grant <[EMAIL PROTECTED]> wrote:
> Hi folks,
> I'm using the following for an accordion style menu
>
> <div class="accordion">
> <h3>Latest news</h3>
> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
> malesuada, ante at feugiat tincidunt, enim massa gravida metus,
> commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
> neque vitae odio.<br />
> read more about xxx...<br />
> <br />
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
> malesuada, ante at feugiat tincidunt, enim massa gravida metus,
> commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
> neque vitae odio.<br />
> read more about xxx...</p>
> <h3><a href="http://www.google.co.uk";>Useful contact list</a></h3>
> <h3>Email newsletter</h3>
>
> <p>Join our email newsletter by completing your details below and
> we'll get you added and keep you updated.<br />
> <form id="form1" method="post" action="">
> <label>Name
> <input type="text" name="textfield" id="textfield" />
> </label>
> <br />
> <label>Email
> <input type="text" name="textfield2" id="textfield2" />
> </label>
> <br />
> <label>
> <input type="submit" name="button" id="button"
> value="Subscribe" />
> </label>
> </form></p>
>
> <h3>Forum</h3>
> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
> malesuada, ante at feugiat tincidunt, enim massa gravida metus,
> commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla
> neque vitae odio. Vivamus vitae ligula.</p>
>
> </div>
>
> and this is the Javascript:
>
> <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>
>
> When I view this in the browser the form is displayed automatically,
> how can I hide it until the user presses for the drop down?
>
> Thanks,
> S
