locked
Can a listView hide/show an inner div element?

    Question

  • So far I have got:

    var touchtext = document.getElementById("touchtext"); var show = touchtext.style.display = 'block';

    listView.addEventListener("iteminvoked", show);

    What I am trying to achieve is when the listView box is selected it reveals the inner div touchtext. I have the selection mode set to single, so I am hoping that it will just display and hide again once unselected. So far I have only managed to show all of the divs or none of them. I don't think iteminvoked is what I am looking for, can any one point me in the right direction?

    Thanks!


    Friday, April 5, 2013 4:49 AM

Answers

  • iteminvolked is only triggered when you click on a listitem (not when you select one).

    The problem you have can be solved with just css as when you select an item (note: SELECT, not invoke), it puts a class on the item called "win-selected", you can then use that in your query selector to display the div inside:

    <style>
      .touchtext {
        display: none;
      }
    
     .win-selected .touchtext {
        display: block;
      }
    
    </style>
    
    <div data-win-control="WinJS.Binding.Template">
      <div class="touchtext>Im Hidden until selected</div>
    </div>
    
    <div data-win-control="WinJS.UI.ListView"
         data-win-options="{
           selectMode: 'single',
           itemTemplate: select("#template")
         }"></div>

    Note if you want this to work this this when you click on the item, you can set tapBehavior to directSelect, so instead of invoking the item it will select it

    • Marked as answer by ViralBeeb Friday, April 5, 2013 12:43 PM
    Friday, April 5, 2013 9:36 AM

All replies

  • iteminvolked is only triggered when you click on a listitem (not when you select one).

    The problem you have can be solved with just css as when you select an item (note: SELECT, not invoke), it puts a class on the item called "win-selected", you can then use that in your query selector to display the div inside:

    <style>
      .touchtext {
        display: none;
      }
    
     .win-selected .touchtext {
        display: block;
      }
    
    </style>
    
    <div data-win-control="WinJS.Binding.Template">
      <div class="touchtext>Im Hidden until selected</div>
    </div>
    
    <div data-win-control="WinJS.UI.ListView"
         data-win-options="{
           selectMode: 'single',
           itemTemplate: select("#template")
         }"></div>

    Note if you want this to work this this when you click on the item, you can set tapBehavior to directSelect, so instead of invoking the item it will select it

    • Marked as answer by ViralBeeb Friday, April 5, 2013 12:43 PM
    Friday, April 5, 2013 9:36 AM
  • Thanks Andy. That was a lot easier than I expected it to be.
    Friday, April 5, 2013 12:44 PM