I'm trying to use the collapsible div in jquerymobile. I want to make the div collapsed when there are more than one row in the dataset, and not-collapsed when there is only one row.

I'm trying to set the data-collapsed attribute on the div (id=collapser) using jQuery on a C# Razor page, but the attribute is not getting set.

1. <div data-role="collapsible-set" data-theme="" data-content-theme="">
                   @{
                       if (Model.Count() > 1)
                       {
                           <script type="text/javascript">
                               $("#collapser").attr("data-collapsed", "true");
                           </script>
                       }
                       else
                       {
                       <script type="text/javascript">
                           $("#collapser").attr("data-collapsed", "false");
                       </script>
                       }
                   }
                       <div data-role="collapsible" id="collapser"><h3>Collaped Data</h3></div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

I get the correct <script> statement in if-else block based on the number of rows in the dataset, but the attribute of the "collapser" id does not get affected.