Open jQuery Accordion using input button

Question

I have created an accordion and there are two issues with it:

1. I want all sections to be closed on pageLoad
2. I want to be able for the first section to open on click of an input button (which is already running another function).

I have already described here, but it didn't work.

The HTML code looks as follows:

<div id="AddInfo" >
        <h3><a href="#">You have ordered...</a></h3>
        <div id="summary" class="accordion">
        <p>Your basket is currently empty.</p>
        </div>
        <h3><a href="#">Payment Details</a></h3>
        <div id="payment" class="accordion" index="1">
        <form id="form1" name="form1" method="post" action="">
        <table>
            <tr>
             <td><label for"Name">Name on Card</label></td><td><input type="text" /></td>
            <tr>
                <td><label for"ccNo">Credit/Debit Card No</label></td>
                <td><input type="text" id="ccNo"/>
            </tr>
            <tr id="exp">
                <td><label for"Exp">Expiry Date</label></td>
              <td><label for "expMonth">Month</label><input type="text" id="expMonth"/>
              <label for "expYear">Year</label><input type="text" id="expYear"/></td>
              </tr>
             <tr>
             <td><label for"Type">Card Type</label></td>
             <td><select class="cardType">
                    <option value="Visa">Visa</option>
                    <option value="Mastercard">Mastercard</option>
                    <option value="American Express">American Express</option>
                 </select></td>
             <tr id="secCode">
             <td><label for"secCode">Security Code:</label></td><td><input type="text" id="secCode"/></td>
         </table>
         </form>
        </div>
        <h3 ><a href="#">Delivery Details</a></h3>
        <div id="delivery" class="accordion">
        <form id="delivForm">
            <table>
                <tr class="Name">
                    <td><label for"delName">Name:</label></td><td><input type="text" id="delName"/></td>
                 </tr>
                 <tr class="Address">
                    <td><label for"delName">Address:</label></td><td><input type="text" id="Add1"/></td>
                 </tr>
                 <tr class="Address">
                    <td></td><td><input type="text" id="Add2"/></td>
                    </tr>
                    <tr class="Address">
                    <td></td><td><input type="text" id="Add3"/></td>
                    </tr>
                    <tr class="Address">
                    <td></td><td><input type="text" id="Add4"/></td>
                    </tr>
                    <tr class="pCode">
                    <td><label for "pCode">Postcode:</label></td><td><input type="text" id="pCode"/></td>
                    </tr>
                 </tr>
             </table>
             <div>

The jQuery script looks like this:

<script>
$(function() {
    $( "#AddInfo" ).accordion()
    });
</script>

Any suggestions?

Thanks in advance!

Answer 1

Include the active and collapisble options as follows (updated demo):

$("#accordion").accordion({
    collapsible: true,
    active: false,
    header: "h3"
});

And in all honesty, it's bad form to answer and accept your own answer, then ask it again because it didn't really work.