diogobento on "Isotope filter in single template"

I'm using isotope to filter a bunch of posts based on the assigned taxonomy (each post only has one taxonomy). Quite straight forward in the archive template but I want to keep the filter menu in the single template.

Any ideas on how to keep the corresponding taxonomy selected and clickable?

I guess I would have to get the taxonomy slug from the post, compare it to the filter menu items and assign a .selected class to the corresponding tag. And direct the menu items back to the archive page, on click…

Code in archive template is as follows:

<div id="options">

        <?php
            // Get Projectos Categories
            $tipos = get_terms('projectos', array(
            'orderby' => 'ID',
            'order' => 'ASC'));
        ?>

        <!-- Projectos Filter -->
        <ul id="filters" class="button-group option-set clearfix" data-option-key="filter">
            <li>
                <a class="button selected" data-filer="*">Todos</a>
            </li>
            <?php foreach($tipos as $tipo): ?>
            <li><a class="button" data-filter="[data-category=<?php echo $tipo->slug; ?>]"><?php echo $tipo->name; ?></a></li>
            <?php endforeach; ?>
        </ul>
        <!-- Projectos Filter Ends -->
    </div>

…

<script type="text/javascript">
        jQuery(document).ready(function( $ ) {
                		$('#filters a').click(function(){
				  //removes class from all items to "clear" the class from your menu
				  $('#filters a').removeClass("selected");

				  //adds the class to whichever item you clicked
				  $(this).addClass("selected");
                // filter items on button click
                $('#filters').on( 'click', 'a', function() {
                  var filterValue = $(this).attr('data-filter');
                  $container.isotope({ filter: filterValue });
                });
        });
        });
        </script>