Tabs

@(Html.Awe().Tabs().Name("tab1")
    .Add("tab 1", "content for tab 1", "expl")
    .Add(@<text>
             <button type="button" class="awe-tab-btn">
                 <span>custom button <b>tab</b></span>
             </button>
          </text>,
        @<text> content for custom tab</text>, "expl")
    .Add("tab 3", @<text> @await Html.PartialAsync("Part1") </text>, "tab3")
    .Add(@<text>
            <button type="button" class="awe-tab-btn tabx">
                <span>tabx</span>
                <div class="darrw"> <i class="o-caret"></i></div>
            </button>
        </text>))

<script>
    // tabx dropmenu
    $(function () {
        function openMenu(opener) {
            var dm = awem.dropmenu({
                dataFunc: function () {
                    return [{ c: 'tab A' }, { c: 'tab B' }];
                },
                minw: 150,
                select: function (item) {
                    var sact = 'awe-active';
                    var tabs = opener.closest('.awe-tabs');
                    tabs.find('.' + sact).removeClass(sact);
                    opener.addClass(sact);
                    tabs.find('.awe-tab').hide();
                    tabs.find('.tabd').remove();
                    var tabd = $('<div/>').addClass('awe-tab tabd expl');
                    tabs.find('.awe-tabscontent').append(tabd);
                    tabd.html(item.c + ' conent');
                }
            });

            dm.open({ opener: opener });
            return dm;
        }

        $('.tabx').click(function () {
            openMenu($(this));
        });
    });
</script>
<style>
    .tab3 {
        padding: 2em;
        background: azure;
        color: green;
    }

    .darrw {
        display: inline-block;
        width: 24px;
        position: relative;
        vertical-align: middle;
    }
</style>

<script>
    $(function () {
        aweui.tabs({ elm: $('#tabs2') });
    });
    // tabx code from previous demo affects this demo as well (tabx menu)
</script>
<div id="tabs2">
    <div data-caption="tab1" class="expl">
        content for tab1
    </div>
    <div>
        <button type="button" class="awe-tab-btn">
            <span>custom button <b>tab</b></span>
        </button>
        <div class="expl">
            content for tab2
        </div>
    </div>
    <div data-caption="tab 3" class="tab3">
        content for tab3
    </div>
    <div>
        <button type="button" class="awe-tab-btn tabx">
            <span>tabx</span>
            <div class="darrw"> <i class="o-caret"></i></div>
        </button>
    </div>
</div>