Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

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

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

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!