JQuery Accordian

This is a demo of loading data using ajax call for JQuery accordion

by FrictionlessPulley

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<h2>Election</h2>
<div id="ballots">
     <h4 data-id="1"><a href="javascript:;" class="ajaxLink">General Ballot</a></h4>
     <div class="ajaxContent"></div>
     <h4 data-id="2"><a href="javascript:;" class="ajaxLink">Residence Hall A</a></h4>
    <div class="ajaxContent"></div>
     <h4 data-id="3"><a href="javascript:;" class="ajaxLink">Residence Hall B</a></h4>
    <div class="ajaxContent"></div>
</div>
<script type="text/x-jquery-tmpl" id="preview">
    <div>id: ${n}<br/>${txt}</div>  
</script>

JavaScript

$(function() {
    var changeStart = function(item, evt) {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: '{"n":"'+$(item).data('id')+'", "txt":"This is the ajax content"}'
            },
            success: function(data) {
                debugger;
                var contentHolder = $(item).next('.ajaxContent');
                $('#preview').tmpl(data).appendTo(contentHolder);
                $(item).data('content-loaded',true);
            },
            error: function(error) {
                alert('there was an error');
            },
            dataType: 'json'
        });
    };
    $('#ballots').accordion({
        active: false,
        autoHeight: false,
        animated: 'bounceslide',
        header: 'h4',
        changestart: function(event, ui) {
            debugger;
            if(ui.newHeader.data('content-loaded') ==='undefined' || !ui.newHeader.data('content-loaded'))
            {
                changeStart(ui.newHeader, event);
            }
        }
    });
});