1

A found a few questions related to this one. However, the solution they provide is not compatible with my situation.

I have a set of tabs which act as filters for displaying content.

<ul id="tabs">
  <li><a href="#tab-approved">Approved</a></li><!-- only display if channel has entries -->
  <li><a href="#tab-pending">Pending</a></li>
</ul>

<div id="tab-approved">
  {exp:channel:entries channel="thing" search:thing_status="approved"}
    ...
  {/exp:channel:entries}
</div>

...

How can I only display the tab if there are entries which match the search filter?

  • Is the ul#tabs on a layout template? – Robson Sobral Oct 30 '14 at 1:39
4

Put the div tags inside your channel entries tag pair but to prevent them being output many times wrap them in conditionals. Then you can test the total results returned to decide whether to output your tab.

  {exp:channel:entries channel="thing" search:thing_status="approved"}
    {if count==1}
        <ul id="tabs">
          {if total_results>0}<li><a href="#tab-approved">Approved</a></li>{/if}
          <li><a href="#tab-pending">Pending</a></li>
        </ul>
        <div id="tab-approved">
    {/if}
    ...
    {if count==total_results}</div>{/if}
  {/exp:channel:entries}
| improve this answer | |
  • 1
    You can extend the example with {if no_results}pending{/if} – GDmac Oct 30 '14 at 17:39
  • Is count the number of the current iteration? That seems very strange. Otherwise, it would seem the <ul> would output multiple times. This also doesn't work because you have the "pending" nav within the "approved" entries loop. All the nav links within the <ul> should only display if there are entries within that search. – Andrew Oct 30 '14 at 18:48
  • Yes the count variable only activates if there are entries, in foamcow's example the UL would only appear once. If there are no results the channel entries tag won't output anything. I think you need to provide some more information about the pending link, can you post some expected output for different result cases? – Bluedreamer Oct 30 '14 at 20:59
0

I found a way to achieve what I wanted, though the solution may not be the best practice. By adding limit="1" I could enforce that the loop is only run once and I can check if there is greater than zero:

    <ul id="tabs">
      {exp:channel:entries channel="thing" dynamic="no" search:thing_status="not approved|pending" limit="1"}
        {if count > 0}
          <li><a href="#tab-operating">Operating</a></li>
        {/if}
      {/exp:channel:entries}
      {exp:channel:entries channel="thing" dynamic="no" search:thing_status="approved" limit="1"}
        {if count > 0}
          <li><a href="#tab-approved">Approved</a></li>
        {/if}
      {/exp:channel:entries}
      {exp:channel:entries channel="thing" dynamic="no" search:thing_status="pending" limit="1"}
        {if count > 0}
          <li><a href="#tab-pending">Pending</a></li>
        {/if}
      {/exp:channel:entries}
    </ul>

I also added a style of display: none on the tabs so that even if there were no results, the tab would be hidden until the user clicked on the nav link.

| improve this answer | |

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.