 <p>Basic mechanics for this is very simple. Just toggle a class on list container. In CSS set a set of rules for items that are descendent of that class to change floats or columns or css table properties . Also use that main list class to determine what you want displayed within the items, or how you want them displayed</p> <p>Once class is removed they go back to block elements and default css </p> <p>Simple example:</p> <p>HTML:</p> <pre><code>&lt;ul id="itemList"&gt; &lt;li&gt; &lt;h3 class="title"&gt;Item # 1&lt;/h3&gt; &lt;div class="details"&gt;Detals # 1&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>CSS:</p> <pre><code>.grid li{ float:left; width:30%;margin-right:5px} .grid .details{display:none} </code></pre> <p>JS:</p> <pre><code>$('button').click(function(){ var txt=$(this).text(); txt= txt=='Grid view'? 'List view' : 'Grid view'; $(this).text( txt); $('#itemList').toggleClass('grid') }); </code></pre> <p>DEMO: <a href="http://jsfiddle.net/kzDNe/" rel="nofollow">http://jsfiddle.net/kzDNe/</a></p>