azerothcore-armory/static/character-quests.hbs

<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
{{> icons }}
<script type="application/javascript">
    const aowow_tooltips = { "renamelinks": true, };
</script>

<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>

{{> character-header }}

{{#each data.categories as |quests category|}}
<div class="quests-table" style="margin-bottom: 20px;">
    <h2 class="is-size-4 category-header collapsible">
        {{category}}
        <span class="collapse-icon">▼</span>
    </h2>
    
    <div class="category-content expanded">
        <!-- In Progress Quests -->
        <h3 class="is-size-5 collapsible">
            In Progress
            <span class="collapse-icon">▼</span>
        </h3>
        <div class="collapsible-content expanded">
            <table class="table is-striped is-hoverable is-fullwidth">
                <thead>
                    <tr>
                        <th>Quest</th>
                        <th>Level</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each quests}}
                    {{#if (eq this.status "In Progress")}}
                    <tr>
                        <td class="quest-name">{{this.title}}</td>
                        <td class="quest-level">{{this.questLevel}}</td>
                        <td class="quest-status {{this.status}}">{{this.status}}</td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>

        <!-- Completed Quests -->
        <h3 class="is-size-5 collapsible">
            Completed
            <span class="collapse-icon">▼</span>
        </h3>
        <div class="collapsible-content">
            <table class="table is-striped is-hoverable is-fullwidth">
                <thead>
                    <tr>
                        <th>Quest</th>
                        <th>Level</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each quests}}
                    {{#if (eq this.status "Completed")}}
                    <tr>
                        <td class="quest-name">{{this.title}}</td>
                        <td class="quest-level">{{this.questLevel}}</td>
                        <td class="quest-status {{this.status}}">{{this.status}}</td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>
{{/each}}

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.collapsible').forEach(header => {
        header.addEventListener('click', function(e) {
            // Stop event from bubbling to parent collapsible elements
            e.stopPropagation();
            
            const content = this.nextElementSibling;
            content.classList.toggle('expanded');
            this.classList.toggle('expanded');
        });
    });
});
</script>