<div id="rule_tabs">
    <ul>
        {roles}
        <li><a href="#rule_tab_{id}">{role}</a></li>
        {/roles}
    </ul>
    {data}
    <div id="rule_tab_{id}" >
        {form_open}
        <div class="accordion">
            {res}
            <h3>{resource_name}</h3>
            <div>
                {resource_select}
            </div>
            {/res}
        </div>
        {form_close}
    </div>
    {/data}
</div>
<style>
    .accordion {
        padding-top: 20px;
    }
</style>
<script>
    $(function() {
        $(".accordion").accordion({
            heightStyle: "content"
        });
        $('#rule_tabs').tabs();
    });
</script>