How to Add Product Description Tabs On The Product Detail page [Without Plugin]

I want to Add the Information regarding the Product and I need to have the Several Tabs at the bottom. how can I add the tabs at the bottom of the page to display the Description/specification / and other details without purchasing any plugin am  new to the nop commerce if anybody knows how to do it, please help

SunnySanyal wrote:

I found a method, maybe complex and difficult. But it works.
U should try this method.

Look this link and understand : https://ikikiz.com/en/red-striped-bag-set-of-2

Step 1 : Open Product/ProductTemplateSimple.cshtml and find ur accordion or tab code block.
Step 2 : We will make a check for if product long description is not entered will bring a topic.
I made a partial view in /Products for the topic to be brought. (_AutoTopicForProductLayoutOne.cshtml)

About description in Product/ProductTemplateSimple.cshtml :

@{var IsAutoOrCustomTopicOk = Html.Partial("_AutoTopicForProductLayoutOne");}
@if (!String.IsNullOrEmpty(Model.FullDescription))
                    {
                        <li>
                            <div class="collapsible-header">
                                <i class="material-icons">description</i>
                                <h3>@T("products.compare.fulldescription")</h3>
                            </div>
                            <div class="collapsible-body" itemprop="description" id="fulldescription">
                                @Html.Raw(Model.FullDescription)
                            </div>
                        </li>
                    }
                    else if (IsAutoOrCustomTopicOk.ToString().Length > 0)
                    {
                        <li>
                            <div class="collapsible-header">
                                <i class="material-icons">description</i>
                                <h3>@T("Description.About.Product", Model.Name)</h3>
                            </div>
                            <div class="collapsible-body" itemprop="description">
                                @Html.Partial("_AutoTopicForProductLayoutOne")
                            </div>
                        </li>
                    }

--------------------------------------------------
I changed some names in this file with jQuery. This auto topic partial view :

@{
    string StoreName = Model.CurrentStoreName;
    string ProductPrice = Model.ProductPrice.Price;
    string ProductSku = Model.Sku;
    string ProductName = Model.Name;
    string ProductTopicGeneral = "Urun.Aciklama.Genel";
    var GeneralTopicForAllProduct = Html.Action("TopicBlock", "Topic", new { systemName = ProductTopicGeneral });

    <div class="product-custom-description">
        @GeneralTopicForAllProduct
    </div>
    <script runat="server">
        $(document).ready(function () {
            $(".product-custom-description").each(function () {
                $(this).html($(this).html()
                .replace(/{StoreName}/g, "@StoreName")
                .replace(/{ProductName}/g, "@ProductName")
                .replace(/{ProductPrice}/g, "@ProductPrice")
                .replace(/{ProductSku}/g, "@ProductSku")
                );
            });
        });
    </script>
}

Now what we do ?
We made a check for long description is not null. If null our long description, brought our topic. If our topic is null, nothing will be shown. Cuz we use "if" and "else if"..
We use replace in script. Thus, we created a dynamic structure for each product.

I also added "Payment Information" and "Delivery and Return Conditions" in the same way.

If u need more help write here. GL.

edit:spelling