Tab Menu +++

index.cshtml

<section class="discus-parallax bg-white">
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="padding:120px 0px;">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    @{
                        bool first = true;
                    }
                    @foreach (Category kategorim in Partial.CategoryRoot(lang).OrderBy(m => m.CategoryOrder))
                    {
                        if (kategorim.CategoryOrder == 16) // Kategori Sıra Numarası 16 Kategorinin Alt Kategorilerini getir
                        {
                            foreach (Category cat in Partial.CategorySubID(kategorim.CategoryID))
                            {
                                <li class="nav-item">
                                    <a class="nav-link @if (first) {<text>active</text>}" data-id="@cat.CategoryLink" id="@cat.CategoryLink" data-toggle="tab" href="#@cat.CategoryLink" role="tab" aria-controls="@cat.CategoryLink" aria-selected="true">@cat.CategoryTitle</a>
                                </li>
                                first = false;
                            }
                        }
                    }
                </ul>
                @{
                    first = true;
                }
                <div class="tab-content" id="myTabContent">
                    @foreach (Category kategorim in Partial.CategoryRoot(lang).OrderBy(m => m.CategoryOrder))
                    {
                        if (kategorim.CategoryOrder == 16) // Kategori Sıra Numarası 16 olan Kategoriye ait Alt Kategorilerin, Makalelerini getir
                        {

                            foreach (Category cat in Partial.CategorySubID(kategorim.CategoryID))
                            {
                                <div class="tab-pane fade @if (first) {<text>show active</text>}" id="@cat.CategoryLink" role="tabpanel" aria-labelledby="@(cat.CategoryLink)-tab">
                                    @foreach (Post postim in Partial.PostsID(cat.CategoryID, 0, 1000, Partial.Order.OrderBy, false))
                                    {
                                        <button class="accordion active">@postim.PostTitle.HtmlEncode()</button>
                                        <div class="panel">@postim.PostContent.HtmlEncode()</div>
                                    }
                                </div>
                                first = false;
                            }
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</section>

Javascript

<script type="text/javascript">
    jQuery(document).ready(function () {
        "use strict";

        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                /* Toggle between adding and removing the "active" class,
                to highlight the button that controls the panel */
                this.classList.toggle("active");

                /* Toggle between hiding and showing the active panel */
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
    });

</script>

CSS

<style type="text/css">

    .tab-content {
        > .tab-pane

    {
        display: none;
    }

    > .active {
        display: block;
    }

    }


    button.accordion.active {
        border-bottom: 1px solid white;
    }
    .accordion {
        background-color: #002272;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }
    .panel {
        padding: 0 18px;
        background-color: white;
        display: none;
        overflow: hidden;
    }

    .owl-carousel-fix {
        overflow: hidden;
    }
</style>

http://www.antalyateknokent.com.tr/tr/antalya-teknokent-tto