adding functionality to display and hide posts module by tags

Author: Rodrigo Techera

_includes/blog_tags_filter.html

@@ -8,14 +8,26 @@
 
         if(jQuery(this).data("tag") == "all") {
           jQuery(this).addClass("all-tag-selected");
+          jQuery('.blog-tag-container').fadeOut('fast', function () {
+            jQuery('.blog-posts-nav').fadeIn('fast');
+          });
+
         } else {
           jQuery(this).addClass("selected");
+          
+          jQuery('.blog-tag-container[data-tag="'+jQuery(this).data("tag")+'"]').siblings().fadeOut('fast', function () {
+            jQuery(this).fadeIn('fast');
+          });
+
+          jQuery('.blog-posts-nav').fadeOut('fast', function () {
+            jQuery('.blog-tag-container').fadeIn('fast');
+          });
         }
       });
     });
   </script>
   <style>
-    .blog-filter-menu .filter-btn {
+    .blog-container .blog-vertical .blog-filter-menu .filter-btn {
       color: #979797;
       border: 1px solid #979797;
       display: inline-block;
@@ -28,22 +40,22 @@
       margin-bottom: 5px;
     }
 
-    .blog-filter-menu .all-tag-selected {
+    .blog-container .blog-vertical .blog-filter-menu .all-tag-selected {
       background-color: #979797;
       color: #ffffff;
     }
 
-    .blog-filter-menu .filter-btn.selected {
+    .blog-container .blog-vertical .blog-filter-menu .filter-btn.selected {
       background-color: #e44c2c;
       border: 1px solid #e44c2c;
       color: #ffffff;
     }
 
-    .blog-filter-menu .blog-filter {
+    .blog-container .blog-vertical .blog-filter-menu .blog-filter {
       cursor: pointer;
     }
 
-    .blog-tag-container {
+    .blog-container .blog-vertical .blog-tag-container {
       display: none;
     }
   </style>

_layouts/blog.html

@@ -33,16 +33,15 @@ <h1 class="blog-index-title">
 
   <div class="main-content-wrapper">
     <div class="main-content">
-
-      {% include blog_tags_filter.html %}
-      
-      <div class="container">
+      <div class="container blog-container">
         <div class="row blog-vertical">
-          {% for post in posts %}
-
-            {% include blog_post_nav.html %}
+          {% include blog_tags_filter.html %}
 
-          {% endfor %}
+          <div class="blog-posts-nav">
+            {% for post in posts %}
+              {% include blog_post_nav.html %}
+            {% endfor %}
+          </div>
         </div>
 
         {% include pagination_buttons.html %}