Всем привет!

Играя на разных ролевых, задумывались ли вы когда-либо, как неудобно порой бывает отыскать нужный смайл-мув среди огромного хаотичного многообразия? Когда-то я играл на форуме, где смайлы-мувы были отсортированы по смыслу. Например "приветствия", "смех", "танцы", "любовь" и т.п.. Это было удобно и меня это избаловало) И всё бы ничего, но порой бывает сложно отнести смайл к какой-то конкретной категории, т.к. он может отвечать сразу нескольким по смыслу. И тогда я всерьёз задумался о фильтрации информации по тегам. Я нашёл на просторах интернета один достаточно простой, но любопытный скрипт, и адаптировал его под наши ролевые форумы. Использовать его можно не только для фильтрации смайлов, но и, допустим, для темы с занятостью персонажей, хронологии и т.п. - тут уж как позволит фантазия.

Итак, ближе к делу.

Предположим, у вас на ролевой есть список персонажей, некоторые из которых имеют 2 и более рода деятельности.

Taylor Noble, 22y.o. - студентка, няня
Archie Cooper, 20y.o. - студент, рок-музыкант
John Fraser, 46y.o. - сержант полиции
Leon Matthews, 34y.o. - журналист, преподаватель в университете
Eloise Simmons, 38y.o. - детектив полиции, писательница
Charlotte Lewis, 51y.o - заведующая хирургическим отделением, преподаватель в университете

[html]<style>

/* Список персонажей
-----------------------------------------------*/

#activity * {margin: 0;}

#activity {
position: relative;
display: flex;
display: -webkit-flex;
flex-direction: column;
max-width: 900px;
height: auto;
margin: 5px auto;
padding: 10px;
box-sizing: border-box;
background-color: linen;
color: #000;
font: normal 12px/16px sans-serif;
}

#activity span {
  text-align: center;
  font: bold 14px/16px sans-serif;
  text-transform: uppercase;
  padding-bottom: 5px;
  width: 100%;
  display: block;
}

#activity > span  {
  font: bold 16px/20px sans-serif;
}

#activity a {text-decoration: none;}

#activity .inner {
display: flex;
flex-direction: row;
}

#activity .inner .chars-nav, #activity .inner .all-chars {
border: 1px solid currentColor;
margin: 0 5px;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
}

#activity .chars-nav {
width: 30%;
}

#activity .chars-nav a {
width: fit-content;
cursor: pointer;
}

#activity .chars-nav .current {font-weight: bold;}

#activity .all-chars {
width: 70%;
display: flex;
flex-direction: column;
}

#activity ul {
list-style: none;
padding: 0;
}

#activity .org {display: none;}

#activity .orgdescr {margin: 0 0 10px 0;}

</style>

<div id="activity">
<span class="actitle">Список персонажей и занятость</span>
<div class="inner">
    <!--фильтрация смайлов по хэштегу by Alex Kolmar-->
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
    $(function() {
        var newSelection = "";
        $(".chars-nav a").click(function(){
        $(".all-chars").show();
        $(".chars-nav a").removeClass("current");
        $(this).addClass("current");
        newSelection = $(this).attr("rel");
        $(".char").not("."+newSelection).slideUp();
        $("."+newSelection).slideDown();
        });
    });
    </script>
    <div class="chars-nav">
    <span>Род деятельности</span>
    <a rel="all" class="current">Все персонажи</a>
    <a rel="edu">Образование</a>
    <a rel="law">Органы правопорядка</a>
    <a rel="med">Здравоохранение</a>
    <a rel="cel">Шоу-бизнес</a>
    <a rel="other">Прочее</a>
    </div>
    <ul class="all-chars">
    <li class="edu char org"><span>Образование</span>
        <div class="orgdescr">
        <p>Студенты, преподаватели, ученики, профессора - все, кто так или иначе даёт или получает знания в учебных заведениях.</p>
        </div>
    </li>
    <li class="law char org"><span>Органы правопорядка</span>
        <div class="orgdescr">
        <p>Их служба и опасна и трудна! Те, кто стоит на страже закона и порядка.</p>
        </div>
    </li>
    <li class="med char org"><span>Здравоохранение</span>
        <div class="orgdescr">
        <p>Во тьме ночной, при свете дня они борются за жизни, не жалея себя.</p>
        </div>
    </li>
    <li class="cel char org"><span>Творчество</span>
        <div class="orgdescr">
        <p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
        </div>
    </li>
    <li class="edu other all char"><a href="">Taylor Noble, 22y.o.</a> - студентка, няня</li>
    <li class="edu cel all char"><a href="">Archie Cooper, 20y.o.</a> - студент, рок-музыкант</li>
    <li class="law all char"><a href="">John Fraser, 46y.o.</a> - сержант полиции</li>
    <li class="cel edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
    <li class="law cel all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
    <li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
    </ul>
</div>
</div>[/html]

...