How do I hide a section of a collapsible FAQ if the data is empty?-CodePudding

I have a collapsible FAQ section that sits on each members profile page. I'd like to hide the question and answer if the data field is empty.

    <div >
        <div >
            <div >>
                <div >
                    <h3 ><b>Who is the registered manager of <?php echo $user['full_name']?>?</b></h3>
                    <span ><i ></i></span>
                </div>
                <div >
                                      <?php echo $user['registered_manager']?> is the registered manager of <?php echo $user['full_name']?>.
                </div>
                 </div>  </div>
                
           <div >
            <div >
                <div >
                    <h3 ><b>How many beds are there at <?php echo $user['full_name']?>?</b></h3>
                    <span ><i ></i></span>
                </div>
                <div >
                There are <?php echo $user['number_of_beds']?> beds in total at <?php echo $user['full_name']?>.</div>
                </div> </div>
               
                 <div >
            <div >
                <div >
                    <h3 ><b>Who owns <?php echo $user['full_name']?>?</b></h3>
                    <span ><i ></i></span>
                </div>
                <div >
                <?php echo $user['full_name']?> is owned and operated by <?php echo $user['group_name']?>.</div>
                </div> </div>
                   
 
  </div>
  </div>
<script type="text/javascript">
    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // expand the panel
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // collapse the panel
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>
.panel-heading span
    {
        margin-top: -20px;
        font-size: 15px;
    
    }

    .row
    {
        margin-top: 40px;
        padding: 0 20px;
    
    }

    .clickable
    {
        cursor: pointer;
    }

The $user['full_name'] will always be populated so I don't need to worry about that. In question one the field that needs to not be blank is $user['registered_manager']

Question 2 is $user['number_of_beds'] and Question 3 is ```<?php echo $user['group_name']

thanks in advance

CodePudding user response：

You can achieve that by adding CSS class .hidden and checking if $user is empty in PHP

CSS:

.hidden { display: none; }

PHP:

<div >
<div >
    <h3 >
      <b>Who is the registered manager of <?php echo $user['full_name']?> 
      </b>.
    </h3>
<span ><i ></i></span>
</div>
    <div >
    <?php echo $user['registered_manager']?> is the registered manager of <?php 
    echo $user['full_name']?>.
    </div>
</div>

CodePudding user response：

You can wrap parts of your html with php if statement which says when to render it. For example this part willl be only rendered when $user['full_name'] is not falsy (empty string, null, zero...).

<?php if ($user['full_name']): ?>
<div >
...
<?php echo $user['full_name']?>
...
</div>
<?php endif ?>

See more examples here: https://www.w3schools.com/php/php_if_else.asp