Код:

<style>

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

#occup * {margin: 0;}

#occup {
  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;
}

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

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

#occup a {
  text-decoration: none;
  font-weight: normal;
}

#occup .inner {
  display: flex;
  flex-direction: row;
  padding: 0;
  background: none;
  border: none;
}

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

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

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

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

#occup .all-chars {
  width: 70%;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

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

#occup .org {display: none;}

#occup .org p {font: normal 12px/16px sans-serif;}

</style>

<div id="occup">
	<span class="actitle">Список персонажей и занятость</span>
	<div class="inner">
    <!--фильтрация объектов по классу, адаптация by Alex Kolmar-->
    <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="cre">Творчество</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="cre 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 cre 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="cre edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
    	<li class="law cre all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
    	<li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
    	<li class="cre all char"><a href="">Jocelyn Brosseau, 43y.o.</a> - художница</li>
    </ul>
	</div>
</div>

1) Нас интересует в первую очередь этот кусок (навигация):

<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="cre">Творчество</a>
  <a rel="other">Прочее</a>
</div>

1.1) <a rel="all" class="current">Все персонажи</a> - весь список персонажей. Класс current для отображения по умолчанию, до начала фильтрации.
1.2) Названия, выделенные красным - классы сфер деятельности. Можно добавить/убрать лишнее или придумать свои названия.

2) Список персонажей:

<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="cre 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 cre 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="cre edu all char"><a href="">Leon Matthews, 34y.o.</a> - журналист, преподаватель в университете</li>
    <li class="law cre all char"><a href="">Eloise Simmons, 38y.o.</a> - детектив полиции, писательница</li>
    <li class="med edu all char"><a href="">Charlotte Lewis, 51y.o.</a> - заведующая хирургическим отделением, преподаватель в университете</li>
    <li class="cre all char"><a href="">Jocelyn Brosseau, 43y.o.</a> - художница</li>
    </ul>

2.1) org - класс для описания сферы деятельности. Не отображается в общем списке персонажей, в стиле скрыт. В целом описание сферы опционально, можно полностью снести вот этот кусок:

Свернутый текст

<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="cre char org"><span>Творчество</span>
        <div class="orgdescr">
        <p>Самовыражение достойно уважения! Те, кто так или иначе пожелал заявить о себе миру.</p>
        </div>
    </li>

Важно! Если вы всё же хотите сделать описание сфер деятельности, то все сферы должны находить выше списка персонажей! Иначе получится бардак.

2.2) all - класс, нужный, чтобы персонаж отображался в списке всех персонажей. У описания сфер деятельности нет этого класса, чтобы они отображались только непосредственно в своём списке.

2.3) char - класс, нужный для обозначения персонажа, что это именно действующий персонаж. Если вы хотите добавить в список персонажей акционных персонажей, помимо действющих, им можно добавить свой класс, а классом char объединить всех действующих персонажей.

2.4) edu law med cre other - классы, выделенные красным - сферы деятельности. Должны совпадать со списком в навигации. Добавляя в список персонажей очередного персонажа, можно приписывать ему сколько угодно подходящих классов:

<li class="класс1 класс2 класс3 all char"><a href="">Имя</a></li>

Итак, обо всём по порядку.

1)

#occup * {margin: 0;}

Эта часть обнуляет отступы от краёв всех элементов внутри указанного id. Необязательно, если вам не нужно - можете вообще убрать и указать отступы конкретно для нужного селектора.

2)

#occup {
  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;
}

Селектор контейнера с фильтром - в данном случае общие настройки контейнера с занятостью персонажей - размер, позицинирование, настройки цвета и шрифта и т.п.

3)

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

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

Все заголовки в контейнере занятости, а второй селектор - основной заголовок.

4)

#occup a {
  text-decoration: none;
  font-weight: normal;
}

Общий стиль ссылок внутри контейнера с фильтром. Если какие-то настройки не отображаются, то можно прописать как .punbb #occup a или добавить !important к нужной строке.

5)

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

Внутренний контейнер, содержащий в себе контейнер с навигацией по сферам и контейнер со списком персонажей.

6)

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

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

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

Собственно, 2 внутренних контейнера - .chars-nav  - список сфер деятельности, .all-chars - список персонажей. Первый селектор - общие настройки, второй и третий - отдельные для каждого. В данном случае у них разная ширина.

6)

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

Настройки ссылок в навигации по сферам. Необязательный в целом параметр.

7)

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

Выделение активного фильтра в навигации по сферам деятельности. В данном случае просто ссылка выделена жирным шрифтом. Можно добавлять свои настройки - цвет, размер и т.п.

8)

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

То же, что и #occup .chars-nav, но если у вас будет не ul, а div, то надобности в этом куске кода не будет. Данный кусок убирает точки и отступы в элементах списка (в принципе, те же настройки уже есть в стиле форумов).

9)

#occup .org {display: none;}

Сокрытие описания каждой из сфер деятельности из общего списка персонажей. Если у вас в принципе не планируется описаний сфер деятельности, то этот кусок не нужен.

10)

#occup .org p {font: normal 12px/16px sans-serif;}

Настройки шрифта в описании сфер деятельности. Тоже опционально.

Сам скрипт фильтра я нашёл здесь: тык. Это тоже не первоисточник, т.к. автор статьи перевёл её с иностранного языка. А вот первоисточник.
Меня не устраивали некоторые эффекты анимации и ещё некоторые детали, поэтому я модернизировал скрипт под свои нужды.

Авторская версия <script type="text/javascript">   $(function() {     var newSelection = "";     $("#flavor-nav a").click(function(){       $("#all-flavors").fadeTo(200, 0.10);       $("#flavor-nav a").removeClass("current");       $(this).addClass("current");       newSelection = $(this).attr("rel");       $(".flavor").not("."+newSelection).slideUp();       $("."+newSelection).slideDown();       $("#all-flavors").fadeTo(600, 1);     });   }); </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>

Меня в первую очередь не устраивало, что при выборе того или иного фильтра эффект угасания применяется ко всей выборке подходящих элементов. Поэтому я убрал эту строчку (красным). И, соответственно, заменил fadeTo(200, 0.10) на просто show().
Вообще говоря, такие методы, как fadeTo или slideUp хорошо применять для плавной анимации. В данном случае у меня используется slideUp и slideDown при переключении фильтров, но если вам не нужна анимация, то можно заменить на hide и show. Вот так:

<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).hide();
      $("."+newSelection).show();
    });
  });
</script>