How to expand/collapse html table with partial view?

Question

I am trying to expand/collapse a table row when a button is clicked. For the moment I can only expand the row.

I want to be able to collapse it aswell.

I am using a partial view. I have tried this: expand/collapse table rows with JQuery but can't get it to work since I am loading data from a sql-database in a foreach loop.

To clarify: This expands the table, but I'm missing the collapse-part of my javascript code. Thanks in advance.

PartialView

<div class="table" id="logtable">
        <div class="row">
            <div class="cell" id="tableth">
                message
            </div>
        </div>

        @foreach (var item in Model.Logs)
        {
            <div class="row">
                <div class="cell" id="tabletd">
                    <input type="button" name="answer" value="Show Div" onclick="showDiv(@item.id.ToString())" />
                    @Html.DisplayFor(modelItem => item.message)
                </div>
            </div>
            <div class="row">
                <div id="@item.id.ToString()" style="display:none;" class="answer_list">
                    <strong>Uri:</strong> @item.Uri <br/>
                    <strong>Method:</strong> @item.Method <br />
                    <strong>HttpStatus:</strong> @item.HttpStatus <br />
                </div>
            </div>

Javascript (in my HTML-view)

<script type="text/javascript">
            function showDiv(message) {
                document.getElementById(message).style.display = "block";
            }
        </script>

your loop creates elements with duplicate `id` for ex: `tabletd`.. Try to post rendered `html` from browser.. — Guruprasad J Rao, Oct 12 '15 at 07:40

Ben Hillier · Accepted Answer · 2015-10-12T07:48:39.910

Do you want a toggle function? Check the status of the element and then chose whether to show or hide:

<script type="text/javascript">
            function showDiv(message) {
                if(document.getElementById(message).style.display == 'block'){
                    document.getElementById(message).style.display = "none";
                }
                else{
                    document.getElementById(message).style.display = "block";
                }
            }

</script>

Strictly speaking, this is pure javascript and not jQuery. If you really are using jQuery, you can make it even simpler:

        function showDiv(message) {
            $('#'+message).toggle();
        }

You can even even go for a beautiful animation:

        function showDiv(message) {
            $('#'+message).slideToggle();

        }

This was exactly what i was looking for. Thanks! :) I'll check it as the answer in 5 minutes.. — Erik Sellberg, Oct 12 '15 at 07:45

mschoudhary · Answer 2 · 2016-01-13T16:40:29.110

 <style>

 #dvExpoByBatchDate .expandExpo {
        background-image: url("../Images/Expand.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }

    #dvExpoByBatchDate .expandExpoDisabled {
        background-image: url("../Images/ExpandDisabled.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }

    #dvExpoByBatchDate .collapseExpo {
        background-image: url("../Images/Collapse.gif");
        background-repeat: no-repeat;
        background-position: center,center;
    }


  </style>

  //This is WrapperModel which contains all models for different level. 

 public class WrapperModel
    {
        public List<Employee> ListEmployee;
        public List<Manger> Listmanger;
        public List<Programmer> ListProgrammer;

    }




  @model Model.WrapperModel


  <script>  
    //Default set to collapse Parent Header
    $("#dtExposure .relationshipExposure").attr('colspan', 1);

  //Hide child columns
   $(".subRelationshipExposure").hide();
</script>

<style>
    #dtExposure tr th {
        cursor: default !important;
    }
  </style>

  <table id="dtExposure" class="dbExposure display">
    @if (Model != null)
    {
        if (Model.ListEmployee!= null)  -- Parent Row View
        {
            @Html.Partial("Exposure/_ParentPartial", Model)
        }
        if (Model.Listmanger!= null)  -- child Row View
        {
            @Html.Partial("Exposure/_ChildPartial", Model)
        }
    }
</table>

  // Parent Partial View

  @model Model.WrapperModel


   <thead id="groupHead">
    <tr>
        <th rowspan="2" style="background-color: #003675"></th>

        <th rowspan="2" style="background-color: #003675">ID</th>
        <th class="relationshipExposure sorting_disabled" colspan="4"           style="background-color: #003675">
            FullName <span>&#9658</span>  
    </tr>
    <tr>
        @*HiddenSubChildColumn*@
        <th style="background-color: #003675">FullName</th>
        <th class="subRelationshipExposure" style="background-color: #003675">First Name</th>
        <th class="subRelationshipExposure" style="background-color: #003675">Last Name</th>
        <th class="subRelationshipExposure" style="background-color: #003675">Phone</th>       
    </tr>
</thead>

<tbody id="groupBody">
    @foreach (var item in Model.ListEmployee)
    {
        <tr>
            <td id="toggleExposureRelationship" class="expandExpo emptyTd" style="background-color:white;border:none"></td>          
            <td>@item.CDL</td>         
            <td>
                <span id="relationshipExpo" style="color: #0000ff; cursor: pointer">@item.FullName</span>
            </td>
            <td class="subRelationshipExposure">@item.FirstName</td>
            <td class="subRelationshipExposure">@item.LastName</td>
            <td class="subRelationshipExposure">@item.Phone</td>           
        </tr>
    }
</tbody>




//Child Partial View


  @model Model.WrapperModel


  <thead id="customHead">
    <tr class="SubExposureCustomer" style="display: none">
        <th class="emptyTd"></th>
        <th style="background-color: #003675">ID#</th>
        <th style="background-color: #003675">Full Name</th>
        <th style="background-color: #003675"   class="subRelationshipExposure">First Nmae</th>
        <th style="background-color: #003675" class="subRelationshipExposure">Last Namen</th>
        <th style="background-color: #003675" class="subRelationshipExposure">Phone</th>
</tr>

<tbody id="customBody">
    @*Customer Level*@
    @foreach (var item in Model.Listmanger)
    {
        var currCustomerMasterId = item.CUSTOMERMASTERID;
        <tr class="SubExposureCustomer" data-currcustomermasterid="@currCustomerMasterId" style="display: none">
                        <td class="ExpoCustomerIcon expandExpo emptyTd"   style="background-color:white;border:none"></td>
            <td>@item.ID</td>
            <td>@item.FULLNAME</td>
            <td class="subRelationshipExposure">@item.FIRSTNAME</td>
            <td class="subRelationshipExposure">@item.LASTNAME</td>
            <td class="subRelationshipExposure">@item.PHONE</td>
</tr>


//For Pure MVC Grid Collapse
function ToggleExposure(“relationshipExposure”, “subRelationshipExposure”, 4) {
    $(document).on("click", "." + className, function (e) {
        var selfExposre = $("." + className);
        var subSelfExposre = $("." + subclassName);
        if (selfExposre.attr('colspan') == colspan) {
            subSelfExposre.toggle();
            selfExposre.attr('colspan', 1);
            isCollpase = false;
        }
        else {
            subSelfExposre.toggle();
            selfExposre.attr('colspan', colspan);
            isCollpase = true;
        }

        var varId = selfExposre.find("span");
        varId.empty();
        isCollpase ? varId.html("&#9668") : varId.html("&#9658");
    });
}

How to expand/collapse html table with partial view?

2 Answers2