title: Filter content with multiple tags but only allow user to select one tag at a time
body: <p>I'm building a page for an academic website meant to sort papers by tags. Each paper should be able to be tagged with multiple topics (e.g., ad hoc and metaphor) but the user should only be able to select one tag. </p>
  
  <p>Here's how it is currently: <a href="http://www.casasanto.com/homeRevamp/index.html" rel="nofollow">http://www.casasanto.com/homeRevamp/index.html</a>. As it is now, the user can select more than one tag to narrow the search. We want to simplify it so that clicking on metaphor after clicking ad hoc will show you every paper tagged with metaphor, not everything tagged with ad hoc AND metaphor.</p>
  
  <p>HTML and CSS: </p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;title&gt;Tagsort Demo&lt;/title&gt;
  
      &lt;style&gt;
  
      html,body {
          margin: 0;
          padding: 0;
      }
  
      .container {
          width: 80%;
          margin: 0 auto;
      }
  
      .item {
          box-sizing: border-box;
          float: left;
          position: relative;
          min-height: 1px;
          padding-left: 0px;
          padding-right: 0px;
          width: 80%;
          margin-bottom: 20px;
          overflow: hidden;
      }
  
      .item .wrapper {
          background-color: white;
          padding: 8px;
      }
  
      .item .wrapper .item-tags {
          color: gray;
          font-size: 12px;
          line-height: 1.8;
      }
  
      .tagsort-tags-container {
          margin: 40px 0;
      }
  
      .tagsort-tags-container span {
          display: inline-block;
          border: 2px solid #CCC;
          color: gray;
          font-size: .9em;
          line-height: 10px;
          padding: 5px 9px;
          margin: 5px;
          cursor: pointer;
          border-radius: 2px 2px 2px 2px;
          -moz-border-radius: 2px 2px 2px 2px;
          -webkit-border-radius: 2px 2px 2px 2px;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }
  
      .tagsort-tags-container span:hover {
          border: 2px solid #000;
          color: #FFF;
          background-color: #000;
  
      }
      .tagsort-tags-container span.tagsort-active {
          border: 2px solid #000;
          color: #000;
          background-color: transparent;
      }
  
  &lt;/style&gt;
  
      &lt;link href="tagsort.css" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
      &lt;link rel="stylesheet" href="filterTagsortStylesheet.css" type="text/css"&gt;
      &lt;script src="jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="tagsort.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      $(function(){
          // Inclusive = when multiple tags are selected, all elements that contain ANY of those tags will be shown
          // Exclusive = when multiple tags are selected, only elements that contain ALL of those tags will be shown. To make exclusive, set "inclusive: false" to "true"
          $('div.tags-container').tagSort({selector:'.item',displaySelector: '.item-tags', displaySeperator: ' / ', inclusive: false, fadeTime:200});
      });
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
  
          &lt;h1&gt;Selected Papers&lt;/h1&gt;
  
          &lt;h3&gt;Click on a topic to see all papers tagged under that heading.&lt;/h3&gt;
  
          &lt;div class="tags-container row"&gt;&lt;/div&gt;
  
          &lt;div class="item col-md-3" data-item-id="1" data-item-tags="Ad Hoc Congition"&gt;
              &lt;div class="wrapper"&gt;
                  Casasanto, D. (in press). Temporal language and temporal thinking may not go hand in hand. In B. Lewandowska-Tomaszczyk (Ed.), &lt;i&gt;Conceptualizations of time&lt;/i&gt;. Amsterdam: John Benjamins.
                  &lt;p class="item-tags"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item col-md-3" data-item-id="2" data-item-tags="Ad Hoc Congition, Bodily Relativity"&gt;
              &lt;div class="wrapper"&gt;
                  Casasanto, D., &amp;amp; Lupyan, G. (2015). All concepts are ad hoc concepts. In E. Margolis &amp;amp; S. Laurence (Eds.), &lt;i&gt;The conceptual mind: New directions in the study of concepts&lt;/i&gt; (pp. 543-566). Cambridge: MIT Press.
                  &lt;p class="item-tags"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item col-md-3" data-item-id="3" data-item-tags="Metaphor"&gt;
              &lt;div class="wrapper"&gt;
                  R.&lt;/a&gt;, Crepaldi, D., Casasanto, D., Crollen, V. &amp;amp; Collignon, O. (2015). Space and time in the sighted and blind. &lt;i&gt;Cognition, 141&lt;/i&gt;, 67-72.
                  &lt;p class="item-tags"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item col-md-3" data-item-id="4" data-item-tags="Bodily Relativity, Space &amp;amp; Time"&gt;
              &lt;div class="wrapper"&gt;
                  Casasanto, D., &amp;amp; &lt;a href="http://www.casasanto.com/tomgijssels/"&gt;Gijssels, T.&lt;/a&gt; (2015). What makes a metaphor an embodied metaphor? &lt;i&gt;Linguistics Vanguard.&lt;/i&gt; doi:10.1515/lingvan-2014-1015
                  &lt;p class="item-tags"&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>;(function($) {
    $.fn.tagSort = function(options) {
        var defaults = {
          selector: '.item-tagsort',
          displaySelector: false,
          displaySeperator: ' ',
          inclusive: false, 
          fadeTime: 200
        };
        options = $.extend(defaults, options);
  
        var tagSortEngine = {
          generateTags: function(elements) {
            var tags_inclusive = {};
            var tags_exclusive = {elements: [], tags: []};
            elements.each(function(i){
              $element = $(this)
              ;
              var tagsData = $element.data('item-tags'),
              elementTags = tagsData.match(/,\s+/) ? tagsData.split(', ') : tagsData.split(',');
  
              $.each(elementTags, function(i, v){
                var tagName = v.toLowerCase();
                if(!tags_inclusive[tagName]){
                  tags_inclusive[tagName] = [];
                  tagSortEngine.container.append('&lt;span&gt;'+v+'&lt;/span&gt;');
  
                }
                if(options.displaySelector !== false){
                  $element.find(options.displaySelector).append(i &gt; 0 ? options.displaySeperator + v : v);
                }
                tags_inclusive[tagName].push($element);
              });
  
              tags_exclusive.elements.push($element);
              tags_exclusive.tags.push(elementTags);
            });
            return options.inclusive == true ? tags_inclusive:tags_exclusive;
          },
          exclusiveSort: function(tags, elements){
            var display = [[],[]];
            $.each(tags.elements, function(element_key, element){
              var showElement = true;
              tagSortEngine.container.find('.tagsort-active').each(function(i){
                if(tags.tags[element_key].indexOf($(this).text()) == -1){
                  showElement = false;
                  display[0].push(element);
                }
              });
  
              if(showElement == true) {
                display[1].push(element);
              }
            });
            return display;
          },
          inclusiveSort: function(tags, elements){
            var display = [[],[]]
            $container.find('.tagsort-active').each(function(i){
              $.each(tags[$(this).text().toLowerCase()],function(element_key, element){
                display[1].push(element);
  
              });
            });
            return display;
          },
  
          inititalize: function(tagsContainer){
            tagSortEngine.container = tagsContainer;
            tagSortEngine.container.addClass('tagsort-tags-container');
            var elements = $(options.selector);
            tagSortEngine.tags = tagSortEngine.generateTags(elements, tagSortEngine.container);
            var tagElement = tagSortEngine.container.find('span');
            tagElement.click(function(){
              $(this).toggleClass('tagsort-active');
              if(!tagElement.hasClass('tagsort-active')){
                elements.fadeIn(options.fadeTime);
              }
              else {
                elements.fadeOut(options.fadeTime);
                var display = options.inclusive == true ? tagSortEngine.inclusiveSort(tagSortEngine.tags, elements):tagSortEngine.exclusiveSort(tagSortEngine.tags, elements);
                if(display[0].length &gt; 0){
                  $.each(display[0], function(hide_key, toHide){
                    if(toHide.is(':visible')){
                      toHide.fadeOut(options.fadeTime);
                    }
                  });
                }
                if(display[1].length &gt; 0){
                  $.each(display[1], function(hide_key, toShow){
                    if(!toShow.is('visible')){
                      toShow.fadeIn(options.fadeTime);
                    }
                  });
                }
              }
            });
          }
        }
        tagSortEngine.inititalize(this);
        return $(this);
      }
  })(jQuery);
  </code></pre>