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?

1
  • Is the ul#tabs on a layout template?
    – Sobral
    Oct 30, 2014 at 1:39

2 Answers 2

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}
3
  • 1
    You can extend the example with {if no_results}pending{/if}
    – GDmac
    Oct 30, 2014 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, 2014 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? Oct 30, 2014 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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