Create a page with layers on/off

Question

I am trying to create a page with layers on and off option.

does anyone know how to do this kind of page?

please let me know, thanks

Answer 1

Here's a FIDDLE

<button class="on">Show All</button>
<button class="off">Hide All</button>
<button data-rel="one">One</button>
<button data-rel="two">Two</button>
<button data-rel="three">Three</button>

<div class="one layer"></div>
<div class="two layer"></div>
<div class="three layer"></div>

---

div {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 100px;
  left: 50%;
  margin-left: -250px;;
  opacity: 0.3;
}
button {
  width: 75px;
  margin-right: 15px;
}
.one {
  background: url(image1.png) 110px 0 no-repeat;
  background-size: 40px 40px;
}
.two {
  background: url(image2.png) 250px 150px no-repeat;
  background-size: 60px 60px;
}
.three {
  background: url(image3.png) 410px 310px no-repeat;
  background-size: 80px 80px;
}

---

$(function() {

  $('button').click(function() {

    var el = $('.'+$(this).data('rel'));

    if(el.css('opacity') === '1') {
       el.stop().animate({ opacity: '0.3' }, 300, 'linear');
    }
    else {
       el.stop().animate({ opacity: '1' }, 300, 'linear');
    }

  });

  $('.on').click(function() {
    $('.layer').stop().animate({ opacity: '1' }, 300, 'linear');    
  });

  $('.off').click(function() {
    $('.layer').stop().animate({ opacity: '0.3' }, 300, 'linear');    
  });

});