0
  • Edit As my first question I made some mistakes, so I'm trying to keep it more clear and useful for other people.

The scenario:
I built a View showing nodes and contextual filters to have taxonomy entities attached to it. I integrated it with isotope so the filters are put in the taxonomy attachment view (as link) that filters nodes as elements of the containers. Additionally I want to show the taxonomy descriptions (shown as full entities) when the correspondent taxonomy filter is clicked. The taxonomy description will appear when I click on the taxonomy filter link and related nodes will be filtered. When I click on the general (*) data filter text I expect to hide again all the taxonomy description.

I was able to find a way in a HTML demo and I'm trying to reproduce it in drupal8, but this doesn't seem to work, so I need help.

What I did: I assigned a class to the general (*) data filter, named "clear-filters", and a class to other filters "filters-show" for javascript selectors. I assigned two classes to the elements I need to hide (the taxonomy descriptions) named "categories" and "items-to-hide". I also created a class "items-to-show" that will replace the "items-to-hide" when a filter is clicked and the custom javascript code is executed.

Here is the HTML code of the filters (simplified for the question):

<ul class="filters">
          <li class="active">
             <a class="clear-filters" href="#" data-filter="*">All</a>
          </li>

          <li class="filters-show">
              <a href="#" data-filter=".tid-1"> Term 1</a>
          </li>
          <li class="filters-show">
              <a href="#" data-filter=".tid-2">Term 2</a>
          </li>
          <li class="filters-show">
              <a href="#" data-filter=".tid-3">Term 3</a>
           </li>
   </ul>

Then the code for the elements hidden by default (or page load):

<div class="view-number1-taxonomy-entities>   
      <div class="isotope-container row">
          <ul>
              <li class="isotope-item tid-1 categories items-to-hide">
                  -the content of the view IE: rendered taxonomy entity-
              </li>
              <li class="isotope-item tid-2 categories items-to-hide"> 
                   -the content of the view IE: rendered taxonomy entity-
              </li>
              <li class="isotope-item tid-3 categories items-to-hide">
                   -the content of the view IE: rendered taxonomy entity-
              </li>
          </ul>
        </div>
</div>
<div class="view-number2-node-entities>   
      <div class="isotope-container row">
          <ul>
              <li class="isotope-item tid-1">
                  -the content of the view IE: rendered node entity-
              </li>
              <li class="isotope-item tid-2"> 
                   -the content of the view IE: rendered node entity-
              </li>
              <li class="isotope-item tid-3">
                   -the content of the view IE: rendered node entity-
              </li>
          </ul>
        </div>
</div>

And here is my simple custom JS code:

jQuery(document).ready(function($){
  $(".filters-show a").click(function(){
    $(".categories").removeClass("items-to-hide").addClass("items-to-show");
  });

});
jQuery(document).ready(function($) {
    $(".clear-filters").click(function () {
        $(".categories").addClass("items-to-hide");
    });
});

The first part of the code is working, if you click on a filter of my view, it shows the taxonomy description and related nodes. But if I click on the "All" link (filter with data-attribute=*) the class "items-to-hide" is not added anymore. Note that I wrote the CSS lines to make the "items-to-hide" override the "items-to-show" so this is not a CSS issue.

In a previous version of the script I also removed the "items-to-show" class, which seems to work in HTML but not on live drupal, ie:

$(".categories").removeClass("items-to-show").addClass("items-to-hide");

I tried to split the code in two JS libraries declarations but with no success: the second JS won't load at all, this appear strange to me.

Hope my question is better improved, any help is appreciated. Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.