title: jquery mobile switch between grid and list view
body: <p>I'm trying to create a jquery function which switches betweena grid and list type layout of elements on my jqm page. Here's my html structure:</p>
  
  <pre><code>&lt;div data-role="page" id="portfolio"&gt;
  &lt;div data-role="header"&gt;
      &lt;a href="#main" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true"&gt;&lt;/a&gt;
      &lt;h1&gt;Projects&lt;/h1&gt;
      &lt;a href="javascript:changeLayout()" id="changelayout" class="ui-btn-right" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
      &lt;ul id="projects"&gt;
          &lt;li&gt;&lt;a href="#incarpi"&gt;&lt;img src="images/incarpi.jpg" &gt;&lt;div class="portfoliotext"&gt;Raspberry Pi In-car computer&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>...</p>
  
  <p>and heres my function:</p>
  
  <pre><code>function changeLayout() {
  if ($('#changelayout').attr('data-icon') == 'grid'){
      $('#changelayout').attr('data-icon', 'bars');
      $('#changelayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
      $('#changelayout').buttonMarkup('refresh');
      $('#projects li img').width('100%');
      $('#projects li').display('none');
      $('.portfoliotext').show();
  }
  else {
      $('#changelayout').attr('data-icon', 'grid');
      $('#changelayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
      $('#changelayout').buttonMarkup('refresh');
      $('#projects li img').width('20%');
      $('#projects li').margin('0');
      $('#projects li').display('inline-block');
      $('.portfoliotext').hide();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>However the elements still just stay one on top of the other. What am I doing wrong?</p>
  
  <p>Thanks</p>