<p>Ok so if you are showing all of the entries by default, lets say you have 10 entires in your "work" section.</p>

<p>I am assuming that you have a category group(s) that each entry belongs to.
From there I would assign the category in a <code>data</code> attribute. This would give you a hook that you could talk to for filtering.</p>

<p><strong>twig</strong></p>

<pre><code>{# Get all entries within the work section #}
{% set entries = craft.entries.section('work').find() %}

{% if entries|length %}
&lt;ul id="myNav"&gt;
    {% for entry in entries %}
        &lt;li data-category="{{ entry.category }}&gt;&lt;a href={{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}
&lt;/ul&gt;
{% endif %}

{# data-category="{{ entry.category }}" could be data-category="my-category" #}
</code></pre>

<p>Then I would have a drop-down, or a set of links that represented each of my categories.</p>

<p><strong>twig</strong></p>

<pre><code>{# Get all categories within the work category group #}
{% set category = craft.categories.group('work') %}

&lt;select id="workFilter" name="workFilter"&gt;
    &lt;option value=""&gt;Select Location&lt;/option&gt;
    {% for cat in category %}
        &lt;option value="{{ cat.slug }}"&gt;{{ cat.title }}&lt;/option&gt;
    {% endfor %}
&lt;/select&gt;
</code></pre>

<p>On the javascript side, you could either listen for a click - and hide whatever nav items did <em>not</em> have the same data-category value.</p>

<p>For example: </p>

<p><strong>html</strong></p>

<pre><code>&lt;a href="javascript:void(0);" data-target="my-category" class="nav-filter"&gt;
</code></pre>

<p>Use a click event to check the data value, and hide whatever nav elements did not have "my-category" as the data-category attribute.</p>

<p>Or, a drop-down like above.</p>

<p><strong>jquery</strong></p>

<pre><code>$('#workFilter').change(function (event) {
    // get the value of the drop-down. Hide all list items that do not have the same data-category value.
});
</code></pre>

<p>You shouldn't need any ajax or anything like that since all of your entries are already on the page. You just need a hook to show/hide them.</p>

<p>Hope this helps!</p>

<p><strong>EDIT</strong></p>

<p>Sure - give <a href="http://api.jquery.com/fadeout/" rel="nofollow">fadeOut</a> a look.</p>

<p>If you are using a button/link you can listen for the <code>click</code> event. Then <code>fadeOut</code> the element. That will fade it out, then set the <code>display</code> to <code>none</code> which should remove the empty gaps for you.</p>

<p>Something like this...</p>

<p><strong>jquery</strong></p>

<pre><code>$('nav-element').click(function(event){
    $('all-things-not-matching).fadeOut('fast', function() {
        // Animation complete.
    });

    event.preventDefault();
});
</code></pre>

<p>Each element that is now hidden has the css values of:</p>

<pre><code>opacity: 0;
display: none;
</code></pre>

CC BY-SA 3.0
2015-11-26T16:53:26.810Z
Hi Damon, thanks for your help. I've managed to get this working but now when I click on a category in the menu it hides everything that isn't in that category but unfortunately they leave a large gap where they used to be. I tried using .remove() which eliminates this problem but means that the element is removed from the DOM completely so that element won't appear if you click another menu item. I'm new to jQuery, is there an alternative to .hide() or .remove() that I can use?
patrick.altair
CC BY-SA 3.0
2015-11-27T01:57:30.943Z
I just updated my answer - see if that helps you out.
Damon
CC BY-SA 3.0
2015-11-29T01:05:36.173Z
Awesome! Glad it helped you out.
Damon
CC BY-SA 3.0
2015-11-25T02:08:36.153Z
2015-11-27T01:57:09.857Z
2015-11-27T01:57:09.857Z
Damon
<p>I have a page where by default it lists all of the entries inside the section 'work'. I'd like to have a secondary menu where I can filter these entries by the field 'projectCategories'. </p>

<p></p>

<pre><code>        {% for entry in craft.entries.section('work').find() %}

            &lt;li class="wp-project"&gt;

                {% for asset in entry.mainProjectImage %}
                    &lt;a href="{{ entry.url }}" class="project-link"&gt;
                         &lt;img src="{{ asset.getUrl('workPageImage')}}" alt="{{ asset.title }}" /&gt;
                    &lt;/a&gt;
                {% endfor %}

                &lt;p class="project-title"&gt;{{ entry.title }}&lt;/p&gt;

                &lt;p class="project-categories"&gt;
                    {% for option in entry.projectCategories %}

                        {% if loop.last %}
                            {{ option }}

                        {% else %}
                            {{ option }} +

                        {% endif %}

                    {% endfor %}
                &lt;/p&gt;
            &lt;/li&gt;

        {% endfor %}
</code></pre>

<p>My current solution is a secondary menu above the entries that links to a url where it filters the entry for just for that project category with:</p>

<pre><code>{% for entry in craft.entries.section('work').search('projectCategories:Packaging') %}
</code></pre>

<p>This works but isn't DRY and unfortunately because of AJAX the secondary menu fades out and back in again when you change the URL. </p>

<p>Is there a way to filter entries by a field without changing the url? Or alternatively is there a way of making the secondary menu not reload with AJAX when on a url that begins with 'work'?</p>

CC BY-SA 3.0
2015-11-24T19:32:22.117Z
When I visit the `work` url, are you showing me all of the work by default? For example, if I choose a filter, is the system hiding all irrelevant entries that don't belong to the chosen filter? Or, are you needing to request new entires for any given filter?
Damon
CC BY-SA 3.0
2015-11-24T22:50:19.053Z
This doesn't really sound like a Craft question? If you already have all the entries in the same page, and just want to filter the contents without doing a new server request, you should just implement the filtering with Javascript? You could either use a full-blown library like Isotope (http://isotope.metafizzy.co/), or a few lines of jquery code.
André Elvan
CC BY-SA 3.0
2015-11-25T00:57:44.320Z
@Damon Yes by default the work page will show all of the entries in work. So I don't think I'd need to request any new entries.
patrick.altair
CC BY-SA 3.0
2015-11-25T01:00:21.387Z
@AndréElvan I just thought maybe there was simple way of filtering entries in craft so that's why I asked here. I think that Isotope library might be what I'm looking for, thanks André.
patrick.altair
<entries><field><filter><ajax>
How to create a secondary menu to filter entries?
# How to create a secondary menu to filter entries?

(Asked by: username_0 on 2015-11-24)

I have a page where by default it lists all of the entries inside the section 'work'. I'd like to have a secondary menu where I can filter these entries by the field 'projectCategories'. 

        {% for entry in craft.entries.section('work').find() %}

            

                {% for asset in entry.mainProjectImage %}
                    
                         
                    
                {% endfor %}

                {{ entry.title }}

                
                    {% for option in entry.projectCategories %}

                        {% if loop.last %}
                            {{ option }}

                        {% else %}
                            {{ option }} +

                        {% endif %}

                    {% endfor %}
                
            

        {% endfor %}

My current solution is a secondary menu above the entries that links to a url where it filters the entry for just for that project category with:
{% for entry in craft.entries.section('work').search('projectCategories:Packaging') %}

This works but isn't DRY and unfortunately because of AJAX the secondary menu fades out and back in again when you change the URL. 
Is there a way to filter entries by a field without changing the url? Or alternatively is there a way of making the secondary menu not reload with AJAX when on a url that begins with 'work'?

**Tags:** entries, field, filter, ajax
> **Comments:**
> **username_1**: When I visit the `work` url, are you showing me all of the work by default? For example, if I choose a filter, is the system hiding all irrelevant entries that don't belong to the chosen filter? Or, are you needing to request new entires for any given filter?  
> **username_2**: This doesn't really sound like a Craft question? If you already have all the entries in the same page, and just want to filter the contents without doing a new server request, you should just implement the filtering with Javascript? You could either use a full-blown library like Isotope (http://isotope.metafizzy.co/), or a few lines of jquery code.  
> **username_0**: @Damon Yes by default the work page will show all of the entries in work. So I don't think I'd need to request any new entries.  
> **username_0**: @AndréElvan I just thought maybe there was simple way of filtering entries in craft so that's why I asked here. I think that Isotope library might be what I'm looking for, thanks André.  

---

## 1 answers

### Answer by username_1 on 2015-11-25. Score: 1 | Accepted answer

Ok so if you are showing all of the entries by default, lets say you have 10 entires in your "work" section.
I am assuming that you have a category group(s) that each entry belongs to.
From there I would assign the category in a data attribute. This would give you a hook that you could talk to for filtering.
twig
{# Get all entries within the work section #}
{% set entries = craft.entries.section('work').find() %}

{% if entries|length %}

    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}

{% endif %}

{# data-category="{{ entry.category }}" could be data-category="my-category" #}

Then I would have a drop-down, or a set of links that represented each of my categories.
twig
{# Get all categories within the work category group #}
{% set category = craft.categories.group('work') %}


    Select Location
    {% for cat in category %}
        {{ cat.title }}
    {% endfor %}


On the javascript side, you could either listen for a click - and hide whatever nav items did not have the same data-category value.
For example: 
html


Use a click event to check the data value, and hide whatever nav elements did not have "my-category" as the data-category attribute.
Or, a drop-down like above.
jquery
$('#workFilter').change(function (event) {
    // get the value of the drop-down. Hide all list items that do not have the same data-category value.
});

You shouldn't need any ajax or anything like that since all of your entries are already on the page. You just need a hook to show/hide them.
Hope this helps!
EDIT
Sure - give fadeOut a look.
If you are using a button/link you can listen for the click event. Then fadeOut the element. That will fade it out, then set the display to none which should remove the empty gaps for you.
Something like this...
jquery
$('nav-element').click(function(event){
    $('all-things-not-matching).fadeOut('fast', function() {
        // Animation complete.
    });

    event.preventDefault();
});

Each element that is now hidden has the css values of:
opacity: 0;
display: none;

> **Comments:**
> **username_0**: Hi Damon, thanks for your help. I've managed to get this working but now when I click on a category in the menu it hides everything that isn't in that category but unfortunately they leave a large gap where they used to be. I tried using .remove() which eliminates this problem but means that the element is removed from the DOM completely so that element won't appear if you click another menu item. I'm new to jQuery, is there an alternative to .hide() or .remove() that I can use?  
> **username_1**: I just updated my answer - see if that helps you out.  
> **username_1**: Awesome! Glad it helped you out.  

---

