u/Venerous

Trying to create a custom macro that creates a tabbed menu - a sidebar with buttons to click to navigate to new panels, and a main content container that manages what each tab contains.

Macro.add('tabmenu', {
    tags: ['tab'],
    handler: function () {
        const tabs = this.payload.slice(1);

        const $wrapper = $('&lt;div&gt;').addClass('tab-wrap');
        const $sidebar = $('&lt;div&gt;').addClass('tab-nav');
        const $content = $('&lt;div&gt;').addClass('tab-content');

        tabs.forEach((tab, i) =&gt; {
            var isFirst = i === 0;

            let $button = $('&lt;button&gt;')
                .addClass(`tab-btn${isFirst ? ' active' : ''}`)
                .attr('data-target', `tab-panel-${i}`)
                .text(tab.args[0]);

            var $panel = $('&lt;div&gt;')
                .addClass(`tab-panel${isFirst ? ' active' : ''}`)
                .attr('id', `tab-panel-${i}`);

            // processes contents and SugarCube logic on the tab
            new Wikifier($panel[0], tab.contents);

            $sidebar.append($button);
            $content.append($panel);
        });

        $wrapper.append($sidebar, $content);

        $wrapper.on('click', '.tab-btn', function () {
            let $menu = $(this).closest('.tab-wrap');

            $menu.find('.tab-btn').removeClass('active');
            $menu.find('.tab-panel').removeClass('active');

            $(this).addClass('active');
            $menu.find('#' + $(this).data('target')).addClass('active');
        });

        $(this.output).append($wrapper);
    },
})

// And then in the Twine passage...

:: SomePassageHere [nobr]

&lt;&lt;tabmenu&gt;&gt;
    &lt;&lt;tab 'Tab 1'&gt;&gt;
        &lt;p&gt;Hello 1&lt;/p&gt;

        &lt;&lt;if (1 + 1) == 2&gt;&gt;Hello&lt;&lt;/if&gt;&gt;
        &lt;&lt;if (2 + 2) == 22&gt;&gt;Goodbye&lt;&lt;/if&gt;&gt;
    &lt;&lt;/tab&gt;&gt;
    &lt;&lt;tab 'Tab 2'&gt;&gt;
        &lt;p&gt;Hello 2&lt;/p&gt;
    &lt;&lt;/tab&gt;&gt;
    &lt;&lt;tab 'Tab 3'&gt;&gt;
        &lt;p&gt;Hello 3&lt;/p&gt;
    &lt;&lt;/tab&gt;&gt;
    &lt;&lt;tab 'Tab 4'&gt;&gt;
        &lt;p&gt;Hello 4&lt;/p&gt;
    &lt;&lt;/tab&gt;&gt;
&lt;&lt;/tabmenu&gt;

This works, however I'm getting a macro error: <</tab>> does not exist. I assume this is because macro tags cannot be containers. If I remove the closing <</tab>> it works just fine and the error goes away, but it looks weird in the Twine passage and I was hoping to avoid doing that. I've tried simply removing it programmatically before rendering the final result but that seems inelegant and I'm hoping for a better solution. May need to split it into a separate macro (<<tabmenu>> and <<tab>>) but not sure. Any advice is appreciated.

Issue with closing a macro tag