Kendo UI template loading with hidden elements

Question

I have a kendo ui template that is loaded in my program, but I need one of the elements to be hidden, so I can use a button to toggle them hidden or shown at any time. I want to use a basic jQuery toggle command, but the issue is getting the elements to be in the correct state initially. Can anyone help me initialize ResultsObjectPartial and ResultsObject has hidden and shown?

Here is my template:

<script type="text/x-kendo-template" id="template">
<div id="details-container">

    <textarea id="ResultsObjectPartial">
        #
            var partialResults;
            Calculation to return a partial result
        #
        #= partialResults #
    </textarea>
    <textarea id="ResultsObject">
        #: ResultObject #
    </textarea>

    <button type="button" id="toggleResults">Full/Partial</button>        
</div>

Here is my jQuery:

$(document).on("click", "#toggleResults", function (e) {
    $("#ResultsObjectPartial").toggle();
    $("#ResultsObject").toggle();
});

Answer 1

I believe it should be as simple as:

<textarea id="ResultsObjectPartial" style="display: none">

What toggle() does is change the CSS display property, in the simplest case setting it to 'none' if it isn't set to that, or removing 'none' if it is. So setting it as 'none' in your html should give you the initial state you are after.