Show or hide div based on if there is content.

#1 / Feb 10, 2012 4:35pm

nhinshaw

13 posts

Hello All,
I’ve run into an issue and I am hoping someone out there might have a solution to my problem.

Here is the situation:
I have a “table” that has some product information - including two download sections. Not every product will have files in each section (though that might change) so I need to find a way to dynamically show and hide the containing div based on whether or not there is content.

Here is the code I am working with:

{exp:channel:entries dynamic="no" entry_id="0{embed:entry_ids}" sort="asc"}
  {if no_results}
    <h2>No Entries</h2>
<p>  {/if}<br />
 <li class="product-details group"><br />
  <div class="text-container"><br />
  </p><h5>{title}</h5>
<p>  {product_description}<br />
  </div><!-- eo text-container --><br />
  {product_image}<br />
  <div class="referencebox request-quote-container group"><br />
   <ul class="blanklist"><br />
   {offline_product_documentation}<br />
     <li class="{switch='odd|even'}"><br />
       <a href="http://{offline_file_upload}">{product_number}</a><br />
     </li><br />
   {/offline_product_documentation}<br />
   </ul>      <br />
   <div class="coa"><br />
    <a href="http://{path=">Request A Quote »</a><br />
   </div><!-- eo coa --><br />
  </div><!-- eo reference box / request quote --><br />
  <div class="referencebox available-online-container group"><br />
   <ul class="blanklist"><br />
   {online_product_documentation}<br />
     <li class="{switch='odd|even'}"><br />
       <a href="http://{online_file_upload}">{online_product_number}</a><br />
     </li><br />
   {/online_product_documentation}<br />
   </ul> <br />
   <div class="coa"><br />
    <a href="http://{path=">Available Online »</a><br />
   </div><!-- eo coa --><br />
  </div><!-- eo reference box / available online --><br />
 </li><br />
{/exp:channel:entries}

All of this is being pulled in through reverse_related_entries.

A working example would be that

<div class="referencebox available-online-container group">

would be hidden if either of the following expressionengine tags within that div returned no data:

<a href="http://{online_file_upload}">{online_product_number}</a>

In short, does anyone know of a way to show or hide a div - and it’s contents, based on whether or not there is content present for a specific channel entry field that occurs within it?

Please let me know if I can clarify anything or provide more information.

Thanks!
Nathan

#2 / Feb 10, 2012 4:39pm
Boyink!
5011 posts
You can run a simple conditional:
```
{if channel_field !=""}
 {channel_field} or other code
{/if}
```
#3 / Feb 10, 2012 4:45pm

nhinshaw
13 posts

Talk about easy, thanks Michael!

#4 / Feb 10, 2012 5:01pm

nhinshaw

13 posts

I may have spoken a bit too soon.

I am bringing that conditional to bear like so:

{if online_product_number !=""}
  <div class="referencebox available-online-container group">
   <ul class="blanklist">
   {online_product_documentation}
     <li class="{switch='odd|even'}">
       <a href="http://{online_file_upload}">{online_product_number}</a>
     </li>
   {/online_product_documentation}
   </ul> 
   <div class="coa">
    <a href="http://{path=">Available Online »</a>
   </div><!-- eo coa -->
  </div><!-- eo reference box / available online -->
  {/if}

In this case it is wrapping the entire div that needs to be omitted. As it stands this always removes the div regardless of whether or not there is content.

Thoughts?

Thanks!
Nathan

#5 / Feb 10, 2012 5:03pm

Boyink!
5011 posts

Sorry..replace “channel_field” with the actual short name of your channel field so EE knows which one to check.

#6 / Feb 10, 2012 5:09pm

nhinshaw

13 posts

I caught that as soon as I hit ‘post’.

Using this:

{if online_file_upload !=""}
  <div class="referencebox available-online-container group">
   <ul class="blanklist">
   {online_product_documentation}
     <li class="{switch='odd|even'}">
       <a href="http://{online_file_upload}">{online_product_number}</a>
     </li>
   {/online_product_documentation}
   </ul> 
   <div class="coa">
    <a href="http://{path=">Available Online »</a>
   </div><!-- eo coa -->
  </div><!-- eo reference box / available online -->
  {/if}

I’m still not showing any of the divs with content.

#7 / Feb 10, 2012 5:12pm

Boyink!
5011 posts

What’s {online_product_documentation}?
#8 / Feb 10, 2012 5:26pm

nhinshaw
13 posts

{online_product_documentation} is channel field found within the element. If that channel_field has data then it should show the ‘div’, if not it should hide everything contained within the conditional statement (at least that is how it is playing out in my head).

Is that doable?
#9 / Feb 10, 2012 5:31pm

Boyink!
5011 posts

But you have it as a tag pair:

{online_product_documentation}
{/online_product_documentation}

Is that a Matrix field?
#10 / Feb 10, 2012 5:36pm

nhinshaw
13 posts

Yeah, {online_product_documentation} is Matrix field that has two fields associated with it: {online_file_upload} and {online_product_number}.
#11 / Feb 10, 2012 5:40pm
Boyink!
5011 posts
OK - your {online_file_upload} content is only going to be available within the {online_product_documentation} tag pair then, so that conditional won’t work.

I think you probably want to check instead to see if your Matrix has rows:
```
{if "{online_product_documentation:total_rows}" >= 0}
```
(That taken from http://pixelandtonic.com/matrix/docs/templates)
#12 / Feb 10, 2012 5:53pm

nhinshaw
13 posts

Crud, sorry I should have made that clear from the start.

I tried to use the total_rows method from the Pixel and Tonic docs but to no avail - I’m still showing all content.

Thanks for taking the time to walk through all this!
#13 / Feb 10, 2012 6:03pm

Boyink!
5011 posts

So if you have no Matrix rows you still get markup returned?

#14 / Feb 10, 2012 6:35pm

nhinshaw

13 posts

Correct, here is what gets output on the rendered page:

<div class="referencebox available-online-container group">
   <ul class="blanklist">
   <!-- this is where the content would be -->
   </ul> 
   <div class="coa">
    <a href="http://206.214.216.113/shop">Available Online »</a>
   </div><!-- eo coa -->
  </div>

and here is what I have in the template:

{if "{online_product_documentation:total_rows}" >= 0}  
  <div class="referencebox available-online-container group">
   <ul class="blanklist">
   {online_product_documentation}
     <li class="{switch='odd|even'}">
       <a href="http://{online_file_upload}">{online_product_number}</a>
     </li>
   {/online_product_documentation}
   </ul> 
   <div class="coa">
    <a href="http://{path=">Available Online »</a>
   </div><!-- eo coa -->
  </div><!-- eo reference box / available online -->
  {/if}

#15 / Feb 11, 2012 7:04am

John St-Amand
865 posts

I think it may simply be the conditional. Two things - first, I’d suggest changing from >= to simply > (otherwise, when you have no rows, the conditional is still true because it’s equal to zero. The second thing is just a suggestion - i’d put “0” instead of just 0. I’ve found conditionals’ behaviour a bit spotty without being explicit like that.

Anyway the first suggestion I think it the more important one. You want it to return results ONLY if the number of rows is greater than zero, not greater than or equal to zero. Then I believe it will work.

Thread

nhinshaw

Boyink!

nhinshaw

nhinshaw

Boyink!

nhinshaw

Boyink!

nhinshaw

Boyink!

nhinshaw

Boyink!

nhinshaw

Boyink!

nhinshaw

John St-Amand

Username

Password

Thread