Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jake Bolton
Jake Bolton
1,956 Points
Posted by Jake Bolton
Jake Bolton
1,956 Points

Conditionally load html related to a subfield

Hello,

I have the following carousel in Wordpress, however not every slide contains a caption. The caption is loaded through a sub field, I was wondering how you can conditionally load the html element depending if the sub field contains a value

<div class="item <?php if($row == 1) { echo 'active'; } ?>">
                        <div class="slider-image"><img src="<?php the_sub_field('image'); ?>" width="100%" alt=""></div>
                        <div class="carousel-caption">
                            <div class="slider-block">
                                <p><?php the_sub_field('caption'); ?></p>
                            </div>
                        </div>
                    </div>

So basically, if there is no value for the 'caption' field then the 'slider-block' div wont appear.

If that makes sense.

Thanks in advance guys.

Cheers, Jake

2 Answers

Jake Bolton
Jake Bolton
1,956 Points
Jake Bolton
Jake Bolton
1,956 Points

Hi Raymon,

Thanks for your reply. To be honest I'm a total newbie to JS, or at least writing it. I was just wondering if it's possible to do this with a nested repeater field.

I'll take a look and if I solve this I'll let you know.

Thanks, Jake

Raymon Oleaga
Raymon Oleaga
19,298 Points
Raymon Oleaga
Raymon Oleaga
19,298 Points

You can probably do it with javascript and css where in css you would create a class or id with a display: non; to hide the element you want. Then in javascript you would say something like "if caption == false add the class or id you created to display none or to hide that div.

Hope this triggers a solution!