jQuery Noob..

[eluser]dobbler[/eluser]
Hi,

I'm working on a project that has 3 levels of Research Interests. Users select their research interests which get added to their profile. There are 275 level 3 interests so rather than display (or even load) all of them I was hoping to use some AJAX to call a model passing the level 2 id, fill a div and then slide down to display it with check boxes.

The level 1 & 2 interests are shown as so:

Code:

* Biological System (level 1)

          o Central Nervous (level 2) (click will call ajax & it's level 3's will be shown below)
          o Circulatory (level 2)
          o Digestive
          o Endocrine
          o Lymphatic
          o Reproductive
          o Respiratory
          o Skeleton & Muscle
          o Urinary
    
* Disease

          o Cancer
          o Cardiovascular Disease
          o Inflammatory Disease
          o Neurological Disorders
    
* Element Type

          o Cell
          o EnvironmentalFactor
          o InfectiousAgent
          o Molecule
          o Organ
          o Process
          o Tissue
          o Tools

* Environmental

          o Biological Agents
          o Chemical
          o Genetic Evolution & Inheritance
          o Lifestyle & Surgical Intervention
          o Nutrition
          o Oxidation
          o Radiation
    
* Technology

          o Bio-Collection
          o Computational Biology
          o Enabling Technology
          o Genomics
          o Imaging
          o Proteomics
          o Transgenics & Animal Models

Being generated by this function

Code:

function add_research()
    {
        // Check if LoggedIn
        if (!$this->session->userdata('LoggedIn')) {
            redirect('home');
        }
        else
        {
// Get 1st and second levels - call the db from research_mdl
            $this->load->model('research_mdl');
            $level1 = $this->research_mdl->get_level1();

            $data['body'] = "<ul>\n";
            foreach ($level1 as $arr2 => $re) {
                $data['body'] .=  "<li>" . $re['LEVEL1'] . "</li>\n";
                $level2 = $this->research_mdl->get_level2($re['Level1Id']);
                    
                $data['body'] .= "<ul id=\"orderedlist\">\n";
                foreach ($level2 as $row) {
                    $data['body'] .=  "<li><a >" . $row['LEVEL2'] . "</a></li>\n";
                    }
                $data['body'] .= "</ul>\n";
                };
                $data['body'] .= "</ul>\n";

                $data['css_file'] = link_tag('css/default.css') . "\n";
                $data['css_file'] .= link_tag('css/layout.css') . "\n";
                $data['page_title'] = "My Details";
                $data['page_heading'] = "My Research Interests";

                $this->load->view('maintemplate', $data);
    }

Firstly, is this possible? Secondly, do you think this is the best way of going about it? and thirdly, any help with the jQuery would be greatly appreciated.

Thanks,

Rob.