twelve-heroes/jsdoc/template/tui-jsdoc-template/tmpl/tutorial.tmpl

<?js
    var hasCodeTab = false;
    var self = this;
?>

<section>
    <header>
        <?js if (children.length > 0) { ?>
        <ul><?js
            children.forEach(function(t) { ?>
            <li><?js= self.tutoriallink(t.name) ?></li>
        <?js }); ?></ul>
        <?js } ?>

        <h2><?js= header ?></h2>
    </header>

    <?js if (isHtmlTutorial) { ?>
        <?js hasCodeTab = !!(codeJs || codeHtml) ? 'nav nav-tabs' : 'nav nav-tabs hidden'; ?>

        <ul id="example-nav" class="<?js= hasCodeTab ?>">
            <li role="presentation" id="example-result-btn" class="active" onclick="showResult()">
                <a href="#">Result</a>
            </li>
            <li role="presentation" id="example-js-btn" class="<?js= codeJs ? '' : 'hidden' ?>" onclick="showJs()">
                <a href="#">JS</a>
            </li>
            <li role="presentation" id="example-html-btn" class="<?js= codeHtml ? '' : 'hidden' ?>" onclick="showHtml()">
                <a href="#">HTML</a>
            </li>
        </ul>
        <article>
            <?js
                var src = 'tutorials/' + originalFileName + '.html';
            ?>
            <iframe id="example-result" width="100%" height="800" frameborder="0" src=<?js= src ?>></iframe>
            <div id="example-js" class="hidden"><pre class="prettyprint source"><?js= codeJs ?></pre></div>
            <div id="example-html" class="hidden"><pre class="prettyprint source"><?js= codeHtml ?></pre></div>
        </article>
    <?js } else { ?>
        <article class="readme">
            <?js= content ?>
        </article>
    <?js } ?>
</section>

<?js if (isHtmlTutorial) {?>
    <script>
        var exampleResult = document.getElementById('example-result');
        var exampleJs = document.getElementById('example-js');
        var exampleHtml = document.getElementById('example-html');
        var exampleResultBtn = document.getElementById('example-result-btn');
        var exampleJsBtn = document.getElementById('example-js-btn');
        var exampleHtmlBtn = document.getElementById('example-html-btn');

        function setActive(el) {
            el.className += ' active';
        }

        function setInactive(el) {
            el.className = el.className.replace(/\s*active\s*/g, '');
        }

        function show(el) {
            el.className = el.className.replace(/\s*hidden\s*/g, '');
        }

        function hide(el) {
            el.className += ' hidden';
        }

        function showJs() {
            hide(exampleHtml);
            hide(exampleResult);
            setInactive(exampleHtmlBtn);
            setInactive(exampleResultBtn);

            show(exampleJs);
            setActive(exampleJsBtn);
        }

        function showHtml() {
            hide(exampleJs);
            hide(exampleResult);
            setInactive(exampleJsBtn);
            setInactive(exampleResultBtn);

            show(exampleHtml);
            setActive(exampleHtmlBtn);
        }

        function showResult() {
            hide(exampleJs);
            hide(exampleHtml);
            setInactive(exampleJsBtn);
            setInactive(exampleHtmlBtn);

            show(exampleResult);
            setActive(exampleResultBtn);
        }
    </script>
<?js } ?>