如何默认隐藏排序图标并通过单击列 header 名称显示

Question

I wanna to hide sorting icons by default and show them by clicking the column header name. This is my.cshtml code:

    @model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="tableHeader" id ="table">   
        <div class="card w-100 mb-1 border-0">
            <div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
                <div class="row p-2">
                    @foreach(var prop in Model)
                    {
                       
                        <div class="col text-center d-table sortable" >
                             <div class="btn-group" id="sorting" onclick="sortingVisibility()">
                            <p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
                                @prop
                                <div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
                                <a href="/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=asc" class="btn btn-xs btn-link p-0">
                                    <i class="fa fa-sort-up" style='color:white;' id="sortUpIcon" aria-hidden="true"></i>
                                </a>
                                <a href="/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=desc" class="btn btn-xs btn-link p-0">
                                    <i class="fa fa-sort-down" style='color:white;' id="sortDownIcon" aria-hidden="true"></i>
                                    @*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*@
                                </a>
                                </div>
                            </p>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    @*location.href='/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=desc'*@
    <script>

       function sortingVisibility() 
        {  
            var iconUp = document.getElementById("sortUpIcon");
            var iconDown = document.getElementById("sortDownIcon");
            var div = document.getElementById("divIcon");  
            if (div.style.display !== "none") {  
                div.style.display = "none";
            }  
            else {  
                div.style.display = "block";
                
            }  
        }  

I tried to do like this but its not working on click it only hide the icon and doesnt change anything. Can anyone give me some hints about this?

Answer 1

In order to hide the div, you have to initially set the display property of the div to none and then we have to set the display property to block or none . Below I have modified your code with the changes.

 @model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="tableHeader" id ="table">   
        <div class="card w-100 mb-1 border-0">
            <div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
                <div class="row p-2">
                    @foreach(var prop in Model)
                    {
                       
                        <div class="col text-center d-table sortable" >
                             <div class="btn-group" id="sorting" onclick="sortingVisibility()">
                            <p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
                                @prop  
{/* added style="display:none" */}                            
<div class="btn-group-vertical" style='padding-left: 20px; display: none' id="divIcon">
                                <a href="/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=asc" class="btn btn-xs btn-link p-0">
                                    <i class="fa fa-sort-up" style='color:white;' id="sortUpIcon" aria-hidden="true"></i>
                                </a>
                                <a href="/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=desc" class="btn btn-xs btn-link p-0">
                                    <i class="fa fa-sort-down" style='color:white;' id="sortDownIcon" aria-hidden="true"></i>
                                    @*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*@
                                </a>
                                </div>
                            </p>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    @*location.href='/Administracija/Ocitavanja/Index?OrderBy=@prop&Sorting=desc'*@
    <script>

       function sortingVisibility() 
        {  
            var iconUp = document.getElementById("sortUpIcon");
            var iconDown = document.getElementById("sortDownIcon");
            var div = document.getElementById("divIcon");  
            //we check if the display property is none by default.
if (div.style.display === "none") {  
                div.style.display = "block";
            }  
            else {  
                div.style.display = "none";
                
            }  
        }