@{
    for (int i = 0; i < Model.Files.Length; i++)
    {

        <tr class="SecondaryBorder Collapsible">
            <!--<td class="text-center SecondaryBorder">@Model.Files[i].FileID</td>-->
            <td class="SecondaryBorder">
                <table>
                    <tr>
                        <td><img src="~/Images/FileBrowser/FileIcon.png" class="BrowserIconImage" /></td>
                        <td>@Model.Files[i].FileName</td>
                    </tr>
                </table>
            </td>
            <td class="text-center SecondaryBorder">@Model.Files[i].FileSize bytes</td>
            <td class="text-center SecondaryBorder">
                <table>
                    <tr>
                        <th class="ActionTable"><input type="button" class="DownloadButton" value="Download" /></th>
                        <th class="ActionTable"><input type="button" class="OpenButton" value="Open" /></th>
                        <th class="ActionTable"><input type="button" class="ExpandButton ExpandInfoButton" value="Expand" /></th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr class="CollapsibleContent">
            <td>
                Placeholder
            </td>
        </tr>
    }
}



<script>
    var coll = document.getElementsByClassName("Collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
</script>

<style>
body {

}


.CenterElement {
    margin-left: 15px;
    margin-right: 15px;
}


.FilebrowserMainTable {
    position: page;
    width: 100%;

}

.MainBorder {
    border: 3px solid white;
    border-collapse: collapse;
}

.SecondaryBorder {
    border: 2px solid white;
    border-right: 2px solid white;
    border-collapse: collapse;
}


th td {
    border: 5px solid blue;
    border-collapse: collapse;
}

.ActionTable {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.DownloadButton {
    background-color: dodgerblue;
    color: white;
    cursor: pointer;
    padding: 6px 15px
}

.DownloadButton:hover {
    background-color: royalblue;
}

.DownloadButton:disabled {
    background-color: slategray;
}

.OpenButton {
    background-color: green;
    color: white;
    cursor: pointer;
    padding: 6px 15px
}

.OpenButton:hover {
    background-color: darkgreen;
}

.ExpandButton {
    background-color: mediumpurple;
    color: white;
    cursor: pointer;
    padding: 6px 15px
}

.ExpandButton:hover {
    background-color:purple;
}

.BrowserIconImage {
    width: 32px;
    height: 32px;
}

.MeguFooter {
    background-image: url('/Images/WeebFooters/NekoMeguFileBrowserSize.png');
    background-position: right bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.Collapsible{

}

.CollapsibleContent {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: rgb(53, 54, 58);
}
</style>