With MVVM how to show/hide inside a list item

[danparker276]

<script type="text/x-kendo-tmpl" id="my-template">
    <ul >
        <li>
        <div onclick="showToggle()"> Show/Hide Form</div>
        <div id="myform"> My Form Stuff</div>
        </li>
    <ul>
</script>

So in the above I want to click on the div or button and what ever and toggle the other part of the list item.
                    <ul data-role="listview" id="myList"
                        data-bind="source: listOfStuff"
                        data-template="my-template"></ul>

now I can't really assign IDs to this. I just want to toggle it with some function like below.  Maybe this is more of a javascript question.  I guess I could also add another variable to my list of objects in my mvvm and then set that to visible true on a click, but I'd rather not add on the to the view model.

function showToggle(){
if ( $('#myform') visible) do
   $('#myform').hide();
else 
  $('#myform').show();
}

[Alexander Popov]

Hello danparker276,

This could be done by either using by adding a visibility flag to the model or by using jQuery to find the div element that should be hidden/shown. For example: 

<div onclick="showToggle(this)"> Show/Hide Form</div>
...
  function showToggle(e){
    $(e).siblings().toggle();
  }

Regards,
Alexander Popov
Telerik

 

 

[danparker276]

Thanks I think that should work, was looking for something like siblings.  Spent too much time on XAML, so my javascript has a few holes in it, thanks