list to grid view using mootools

Question

I'm working on a marketplace type website built using a CMS which uses Mootools JS and I'd like to give the user the option to change from a List View of items to a Grid View.

My problem is upon loading the screen both List and Grid Views are seen and only one disappears when a button is clicked so this is where I need help. I'd like for the List View to appear on the page loading and the Grid View to appear on the button click

I've done tons of research on this and while there's plenty of JQuery answers there's not much at all for Mootools and the only answers I could find suggested using CSS 'display: none' on one of the list elements and that really doesn't work at all.

You can see a basic idea of my problem in http://jsfiddle.net/5ctJL/5/

Here is my HTML

<button id="list">list</button>
<button id="grid">grid</button>

<ul id="ulGrid">
  <li>Grid 1</li>
  <li>Grid 2</li>
  <li>Grid 3</li>
  <li>Grid 4</li>
  <li>Grid 5</li>
</ul>
<ul id="ulList">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS

#ulGrid {
  color: #8A7575;
  font-weight: bold;
  padding: 10px;
  background: #ccc;
  width: 15%;
}

#ulList {
  color: #8A7575;
  padding: 10px;
  font-weight: bold;
}

JS

window.addEvent('domready', function () {

  var myList = new Fx.Slide('ulList');
  var myGrid = new Fx.Slide('ulGrid');

  $('list').addEvent('click', function (event) {
    myGrid.hide();
    myList.show();
  });

  $('grid').addEvent('click', function (event) {
    myGrid.show();
    myList.hide();
  });

});

Many thanks in advance

Answer 1

so. try to decouple from IDs and thick/rigid logic.

var grids = document.getElements('.grid > ul');    
document.getElements('.grid button.toggler').addEvent('click', function(){
    grids.toggleClass('hide');
    this.set('text', grids.match('#ulGrid.hide')[0] ? 'grid' : 'list');
});

with a markup of:

<div class="grid">
    <button class="toggler">grid</button>    
    <ul id="ulGrid" class="hide">
        <li>Grid 1</li>
        <li>Grid 2</li>
        <li>Grid 3</li>
        <li>Grid 4</li>
        <li>Grid 5</li>
    </ul>
    <ul id="ulList">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
</div>

and CSS of:

.hide {
    display: none;
}

#ulGrid {
    color: #8A7575;
    font-weight: bold;
    padding: 10px;
    background: #ccc;
    width: 15%;
}

#ulList {
    color: #8A7575;
    padding: 10px;
    font-weight: bold;
}

will work fine. http://jsfiddle.net/dimitar/5ctJL/6/

to answer additional question about icons, here is something via font-awesome. http://jsfiddle.net/5ctJL/9/

does the same thing but sets class to the correct icon. see http://fortawesome.github.io/Font-Awesome/icons/ for options, I picked two that look like a grid and a list.

var grids = document.getElements('.grid > ul');    
document.getElements('.grid button').addEvent('click', function(){
    grids.toggleClass('hide');
    this.set('class', this.hasClass('fa-list') ? 'fa fa-th' : 'fa fa-list');
});

nb: keep in mind for the icon version I have done some subtle changes to the markup to avoid also setting the className to toggler and have styled the buttons in CSS w/o a namespace - it's proof of concept, not drop in :)

to be honest, I can solve the whole thing in pure CSS (including the click) - if you don't need to support IE8