jQuery Accordion trigger on radio click

jQuery Accordion trigger on radio click

I'd like to start off by saying I'm a newbie to jQuery (which will become apparent in a few seconds).

First I'll tell you what I am trying to do....I have a simple form where a user can fill out info to buy a product. On load, it hides the "Billing Address" area, assuming everyone is using the same shipping and billing address, and asks the user "Is your billing address the same as your shipping address?" and there are two radio buttons "Yes" and "No" (By default, "Yes" is checked.) If the user clicks "No", then using DHTML / CSS the form expands to give them an area where they can enter in the separate address, and if they click "Yes" again, it disappears. Simple right? Problem is, when clicked, it expands the whole form vertically ...which the client hates.

So I figured a jQuery accordion would do the trick and found LOADS of helpful sites (like this one) showing me how to do it. Problem is, they all work on the premise of clicking the header of the div to expand / collapse.

How do I make it work via the radio buttons instead? Am I just as dumb as a bag of rocks?

Code (that works). Essentially I want to add my Yes/No radio buttons to replace the whole "click on the header" action

In file.js:
  1. $(document).ready(function() {

        $('div.accordionButton').click(function() {
            $('div.accordionContent').slideUp('normal');   
            $(this).next().slideDown('normal');
        });
       
        /**
        CLOSE ALL DIVS ON PAGE LOAD
        **/   
        $("div.accordionContent").hide();
       
        /**
        OPENS THE DEFAULT ADDRESS DIV
        **/   
        $("#open").trigger('click');


    });


















In file.css:
  1. #AccordionCart {
        width: 340px;
        }
    #wrapper {
        width: 340px;
        margin-left: 0;
        margin-right: 0;
        }
     
    .accordionButton {   
        width: 340px;
        float: left;
        cursor: pointer;
        }
     
    .accordionContent {   
        width: 340px;
        float: left;
        display: none;
        }




















In file.htm:

  1. <div id="wrapper">
        <div class="accordionButton" id="open">Shipping Address</div>
        <div class="accordionContent">
        Shipping Address Address Form
        </div>

        <div class="accordionButton">Billing Address</div>
        <div class="accordionContent">
        Billing Address Form
        </div>
    </div>