Section Accordion Menu +++

index.cshtml

<section class="bg-white p-5">
        @{
            int card125Col = 3;
            int card125CategoryOrderNumber = 3;

            if (Partial.isCategoryOrderNumber(card125CategoryOrderNumber))
            {
                IEnumerable<Post>
                card125Posts = Partial.PostsOrderNumber(card125CategoryOrderNumber, 0, card125Col, Partial.Order.OrderBy, true, lang);

                Category card125PostCategory = Partial.Category(card125CategoryOrderNumber, lang);
                int card125Count = Convert.ToInt32(Math.Ceiling(card125Posts.Count() / Convert.ToDouble(card125Col)));
                <div class="container">
                    <div class="row">
                        <div class="accordionmenu col-md-8">
                            <h1>@card125PostCategory.CategoryTitle.HtmlEncode()</h1>
                            @foreach (Post comPost in card125Posts.Skip(0).Take(card125Col))
                            {

                                <button class="accordion">@comPost.PostTitle.HtmlEncode()</button>
                                <div class="panel">
                                    <p>@Partial.PostShortContent(comPost.PostID, 240)</p>

                                    <div class="buton2light"><a href="@Partial.PostLink(comPost.PostID)"> @Partial.Translate("Devami", lang)<i class="fa fa-arrow-circle-right"></i></a></div>
                                </div>
                            }
                        </div>
                        <div class="col-md-4">
                            <img src="@card125PostCategory.CategoryThumbnail" />
                        </div>
                    </div>
                </div>
            }
        }
    </section>

Javascript

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

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("accordionplus");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + "100%";
                }
            });
        }
    </script>

CSS

        button.accordion {
            font-size: 22px;
            font-weight: 400;
        }

            button.accordion:hover {
                color: #777;
            }

        button:focus {
            outline: none !important;
        }

        .accordionmenu .accordion {
            background-color: #fff;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: 1px solid #000;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            margin: 10px 0px;
        }

            .accordionmenu .accordion:hover {
                border: 1px solid #555 !important;
                background-color: #fff;
                color: #777;
            }

            .accordionmenu .accordion:after {
                content: '\276E';
                font-weight: bold;
                float: right;
                margin-left: 5px;
                -ms-transform: rotate(270deg);
                transform: rotate(270deg);
            }

        .accordionmenu .accordionplus:after {
            content: "\276E";
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .panel {
            padding: 6px 12px;
            background-color: white;
            color: #333;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }

            .panel .buton2light, .buton2light:hover {
                border: none !important;
                background: transparent !important;
            }

        .buton2light, .buton2light a {
            color: #9f1c1f;
        }

        .buton2light {
            background: #FFFFFF;
            margin-left: 15px;
            display: inline-block;
            padding: 2px 12px;
            text-transform: lowercase;
            margin-top: 10px;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .buton2light i {
                border-left: 1px solid #9f1c1f;
            }

            .buton2light i {
                padding-left: 10px;
                margin-left: 15px;
                line-height: 25px;
            }
    

https://www.tunayegin.av.tr/tr