I want to put a splitter in a bootstrap collapse panel. This works fine when the collapse panel is loaded open (ie a class of collapse in). However when the page loads with the collapse is loaded closed, the splitter does not render. Is there a way to make this work short of having a document ready function that has $(".collapse").collapse('hide');?
Thank-you
Here is the cshtml code.
<div class="panel-heading" style="background-color: #717174;height: 35px;color:white;font-size:11px;width:100%;">
<div class="panel-title">
<div class="row">
<div class="col-md-6">
<form id="form1" name="form1">
<div class="input-group input-group-sm input">
<span style="color:white;font-size:12px;font-weight:bold;">Account: </span>
<input id="selacct" class="form-control" name="selacct" placeholder="Search Account #..." style="width:120px;font-size:10px;height:20px;vertical-align:middle;float:none">
<a href="#" style="color:white;height:20px;"><span class="glyphicon glyphicon-search"></span></a>
<div class="col-md-1" style="border-left:1px solid #cccccc;">
<a data-toggle="collapse" href="#collapse1" style="text-decoration:none;color:white;font-weight:bold;font-size:14px;"><span class="glyphicon glyphicon-menu-down"></span></a>
</div>
<!-- /.end see more -->
</div>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse col-md-12">
<div class="panel-body" style="background-color: #999999;height: 250px;color:white;font-size:12px">
@(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Vertical)
.Panes(verticalPanes =>
{
verticalPanes.Add()
.HtmlAttributes(new { id = "top-pane" })
.Scrollable(false)
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "height: 100%;" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("220px")
.Content(@<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>);
horizontalPanes.Add()
.HtmlAttributes(new { id = "right-pane" })
.Size("220px")
.Content(@<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>);
}).ToHtmlString()
);
})
)
</div>
</div>