javascript - Grid/Row view with jquery or javascript

Question

I would to make a javascript based grid/row view table.
For example, in a page that has like 10 pictures, the user has the ability to either see these picture as grid or to see it as rows. So, when he clicks on the grid icon he see the picture as grid, else he will see it as rows.
Can you give me some tips on how to do it ?

Answer 1

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

Once class is removed they go back to block elements and default css

Simple example:

HTML:

<ul id="itemList">
    <li>
         <h3 class="title">Item # 1</h3>
        <div class="details">Detals # 1</div>
    </li>
</ul>

CSS:

.grid li{ float:left; width:30%;margin-right:5px}
.grid .details{display:none}

JS:

$('button').click(function(){
    var txt=$(this).text();
    txt= txt=='Grid view'? 'List view' : 'Grid view';
    $(this).text( txt);
    $('#itemList').toggleClass('grid')
});

DEMO: http://jsfiddle.net/kzDNe/