There are 8 blocks, you need to filter these blocks by clicking on the link. When you click on the "one-room", put one-room first in the list. And the same with the rest. I myself did not realize this, but I would like to learn.

123

  • It would not be bad to see an example with animation. - Rafael Shepard

2 answers 2

Second option

$(document).ready(function(){ $(".button").click(function(){ var value = $(this).attr("data-filter"); var elem = $(".elem"); if(value == "all"){ $(elem).show("500"); } else{ $(elem).not("."+value).hide("500"); $(elem).filter("."+value).show("500"); } }); }) 
 *{ margin:0; padding:0; list-style:none; box-sizing:border-box; } .clear,.clear:before,.clear:after{ content:""; display:block; clear:both; } ul,.items{ margin:50px auto; width:80%; } ul li{ float:left; padding:10px 30px; background:#ccc; font-weight:900; font-family:helvetica; margin:0 10px; cursor:pointer; } ul li.site-i:focus{ background:tomato; } ul li.foto-i:focus{ background:lightblue; } ul li.template-i:focus{ background:lightgreen; } ul li.all-i:focus{ background:#ccc; } li:focus{ outline:none; border:none; color:#fbfbfb; } .item{ width:30%; height:100px; float:left; margin:3px; text-align:center; line-height:100px; font-size:1.6em; color:#fbfbfb; font-weight:900; font-family:Helvetica; font-variant:small-caps; } .site{ background:tomato; } .foto{ background:lightblue; } .template{ background:lightgreen; } @media (max-width:1200px){ ul li{ zoom:.9; } .item{ zoom:.6; } } @media (max-width:956px){ ul li{ zoom:.8; } .item{ zoom:.5; } } @media (max-width:768px){ ul{ margin:10px auto; } ul li{ margin-left:0; } .items{ margin:10px auto; } .item{ width:45%; zoom:.45; } } @media (max-width:480px){ ul{ margin:10px auto; } ul li{ zoom:.6; } .items{ margin:10px auto; } .item{ width:45%; zoom:.35; font-size:3em; } } @media (min-width:1200px){ ul li{ zoom:.8; } .item{ zoom:.5; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <ul class="clear"> <li class="button all-i" data-filter="all" tabindex="-1">all</li> <li class="button site-i" data-filter="site" tabindex="-2">site</li> <li class="button foto-i" data-filter="foto" tabindex="-3">foto</li> <li class="button template-i" data-filter="template" tabindex="-4">template</li> </ul> <div class="items clear"> <div class="item elem site">site</div> <div class="item elem foto">foto</div> <div class="item elem site">site</div> <div class="item elem foto">foto</div> <div class="item elem template">template</div> <div class="item elem foto">foto</div> <div class="item elem template">template</div> <div class="item elem site">site</div> <div class="item elem template">template</div> <div class="item elem site">site</div> <div class="item elem foto">foto</div> <div class="item elem site">site</div> <div class="item elem foto">foto</div> <div class="item elem template">template</div> <div class="item elem foto">foto</div> <div class="item elem template">template</div> <div class="item elem site">site</div> <div class="item elem template">template</div> </div> </div>

  • Why are you doing 2 answers? - when it was possible to issue 2 examples of your work in one answer. - And
  • @And here, many do so .... - user33274
  • very cool! thank! as time will sit down to analyze! - Rafael Shepard
  • @MaksimLensky two answers should be given only in exceptional cases (for example, if the first answer has already been adopted, and adding something new to it will radically change the meaning). If you just have two solutions, it is better to bring them in one answer, indicating the pros and cons of each. - PashaPash ♦

Actually, this is done

 var fActive = ''; function filterColor(color) { if (fActive != color) { $('div').filter('.' + color).slideDown(); $('div').filter(':not(.' + color + ')').slideUp(); fActive = color; } } $('.f-red').click(function() { filterColor('red'); }); $('.f-blue').click(function() { filterColor('blue'); }); $('.f-green').click(function() { filterColor('green'); }); $('.f-all').click(function() { $('div').slideDown(); fActive = 'all'; }); 
 body { padding: 10%; font-family: sans-serif; } button { padding: 1em; border: 0; margin: 0.25em; color: #fff; cursor: pointer; } .f-red { background: #ff4136; } .f-red:hover { background: #e90d00; } .f-green { background: #2ecc40; } .f-green:hover { background: #208e2c; } .f-blue { background: #0074d9; } .f-blue:hover { background: #004b8c; } .f-all { background: #333; } .f-all:hover { background: #0d0d0d; } .red, .green, .blue { color: #fff; padding: 1em; margin-bottom: 0.25em; } .red { background: #ff4136; } .green { background: #2ecc40; } .blue { background: #0074d9; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> <button class="f-red">Фильтр красных элементов</button> <button class="f-blue">Фильтр синих элементов</button> <button class="f-green">Фильтр зеленых элементов</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button class="f-all">Все элементы</button> </p> <div class="red">Первый</div> <div class="red">Второй</div> <div class="blue">Третий</div> <div class="green">Четвертый</div> <div class="red">Пятый</div> <div class="blue">Шестой</div> <div class="blue">Седьмой</div> <div class="green">Восьмой</div>