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

Reply via email to