[英]How do I hide a section of a collapsible FAQ if the data is empty?
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 class="row">
<div class="col-md-10">
<div class="panel panel-default1">>
<div class="panel-heading">
<h3 class="panel-title"><b>Who is the registered manager of <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php echo $user['full_name']?>.
</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default2">
<div class="panel-heading">
<h3 class="panel-title"><b>How many beds are there at <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
There are <?php echo $user['number_of_beds']?> beds in total at <?php echo $user['full_name']?>.</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default3">
<div class="panel-heading">
<h3 class="panel-title"><b>Who owns <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?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. $user['full_name']
将始终被填充,因此我无需担心。 In question one the field that needs to not be blank is $user['registered_manager']
在问题一中,不需要为空的字段是
$user['registered_manager']
Question 2 is $user['number_of_beds']
and Question 3 is ```<?php echo $user['group_name']问题 2 是
$user['number_of_beds']
问题 3 是 ```<?php echo $user['group_name']
thanks in advance提前致谢
You can achieve that by adding CSS class .hidden
and checking if $user
is empty in PHP您可以通过添加 CSS 类
.hidden
并检查$user
在 PHP 中是否为空来实现
CSS: CSS:
.hidden { display: none; }
PHP: PHP:
<div class="col-md-10 <?php if( empty($user['registered_manager']) ) echo 'hidden' ?> ">
<div class="panel-heading">
<h3 class="panel-title">
<b>Who is the registered manager of <?php echo $user['full_name']?>
</b>.
</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php
echo $user['full_name']?>.
</div>
</div>
You can wrap parts of your html with php if
statement which says when to render it.您可以使用 php
if
语句包装您的部分 html,该语句说明何时呈现它。 For example this part willl be only rendered when $user['full_name']
is not falsy (empty string, null, zero...).例如,这部分将仅在
$user['full_name']
不虚假(空字符串、null、零...)时呈现。
<?php if ($user['full_name']): ?>
<div class="col-md-10">
...
<?php echo $user['full_name']?>
...
</div>
<?php endif ?>
See more examples here: https://www.w3schools.com/php/php_if_else.asp在此处查看更多示例: https ://www.w3schools.com/php/php_if_else.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.