Develop Reference

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. 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

You can achieve that by adding CSS class .hidden and checking if $user is empty in PHP
CSS:
.hidden { display: none; }
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. 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 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

How to open a specific nested bootstrap accordeon based on its unique id

I am generating a dynamic nested accordion with unique client ids. Let's say a user needs to do a modification on accordeon 3, he opens the specific accordion and click on the button "modify". The user is then transported to a new form on a new page to do his modification.
After validating his modification, the user needs to return to the previous page with the listed accordion and have only the specific accordion he selected earlier open. Can somebody please assist me?
Here is my code:
<div id="accordionbox">
<?php
if (isset($listeClient) && count($listeClient) > 0) {
?>
<?php
$iClients = 0;
while ($iClients < count($listeClient)) {
$CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" : $listeClient[$iClients]['CLIENT_ID'];
$nom = $listeClient[$iClients]['CLIENT_NOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_NOM'];
$prenom = $listeClient[$iClients]['CLIENT_PRENOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_PRENOM'];
$projet[] = $listeClient[$iClients]['projet'];
?>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true">
<div id="headingClient<?php echo $iClients; ?>" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-<?php echo $CLIENT_ID; ?>" aria-expanded="false"
href="#collapseMain-<?php echo $CLIENT_ID; ?>" data-toggle="collapse">
<span class="panel-title"><?php echo $nom . ' ' . $prenom; ?></span>
</a>
<div id="collapseMain-<?php echo $CLIENT_ID; ?>" class="panel-collapse collapse"
aria-labelledby="heading<?php echo $CLIENT_ID; ?>" aria-expanded="false">
<div class="panel-body">
<div id="accordionInside-<?php echo $CLIENT_ID; ?>" class="panel-group"
aria-multiselectable="true" role="tablist">
<!-- Informations Personnelles -->
<div class="panel panel-default">
<a id="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Informations Personnelles</span>
</a>
<div id="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Personelle
</div>
</div>
</div> <!-- Fin Informations Personnelles -->
<!-- Contracts -->
<div class="panel panel-default">
<a id="headingContract-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab2"
aria-controls="collapseContract-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapseContract-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Dossiers</span>
</a>
<div id="collapseContract-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingContract-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
<div id="accordionContractBody-<?php echo $CLIENT_ID; ?>"
class="panel-group" aria-multiselectable="true"
role="tablist">
<?php
$iProjets = 0;
while ($iProjets < count($projet[$iClients]['projetz'])) {
$PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID'];
?>
<div id="accordionContract-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-group rapprocher"
aria-multiselectable="true" role="tablist">
<div class="panel panel-default">
<a id="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapse-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
aria-expanded="false"
href="#collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title"><?php echo $projet[$iClients]['projetz'][$iProjets]['PROJET_NOM']; ?></span>
</a>
</div>
<div id="collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Contracts
</div>
</div>
</div>
<?php
$iProjets++;
}
?>
</div>
</div>
</div>
</div> <!-- Fin Contracts -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$iClients++;
}
?>
<?php
}
?>
</div>
And here is what i have been trying:
<?php
if (isset($client_id) && $client_id <> "") {
?>
<script>
$(document).ready(function () {
//open all div starting with collapseMain
$("div[id^='collapseMain']").addClass("in");
//open all div starting with collapsePersonnelle
$("div[id^='collapsePersonnelle']").addClass("in");
//open all div starting with collapseContract
$("div[id^='collapseContract']").addClass("in");
//open all div starting with collapseProjet
$("div[id^='collapseProjet']").addClass("in");
//how to open only the specific accordion with the client id
});
</script>
<?php
}
?>

We can see that you have added unique id to all your ".panel-collapse" divs as id="collapseMain-<?php echo $CLIENT_ID; ?>". We also know that you have the id for which you want to open the accordion.
You can use jquery selector $("#collapseMain-<?php echo $client_id; ?>") to select only the accordion that should be opened.
Lets assume the html code generated by php is:
<div id="accordionbox">
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-1" class="panel-group" aria-multiselectable="true">
<div id="headingClient-1" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-1>" aria-expanded="false"
href="#collapseMain-1" data-toggle="collapse"><span class="panel-title">Client 1</span></a>
<div id="collapseMain-1" class="panel-collapse collapse"
aria-labelledby="heading1" aria-expanded="false">
<div class="panel-body">
Content 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-2" class="panel-group" aria-multiselectable="true">
<div id="headingClient-2" class="panel">
<a class="panel-heading collapsed" title="Tab2"
aria-controls="collapseMain-2>" aria-expanded="false"
href="#collapseMain-2" data-toggle="collapse"><span class="panel-title">Client 2</span></a>
<div id="collapseMain-2" class="panel-collapse collapse"
aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body">
Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-3" class="panel-group" aria-multiselectable="true">
<div id="headingClient-3" class="panel">
<a class="panel-heading collapsed" title="Tab3"
aria-controls="collapseMain-3>" aria-expanded="false"
href="#collapseMain-3" data-toggle="collapse"><span class="panel-title">Client 3</span></a>
<div id="collapseMain-3" class="panel-collapse collapse"
aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body">
Content 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then you can generate javascript code using php like
<?php
if (isset($client_id) && $client_id <> "") {
?>
$(document).ready(function() {
$("#collapseMain-<?php echo $client_id; ?>").addClass("in");
});
<?php } ?>
You can have a look at this jsfiddle

How to remove "css classes" when the "a href" is empty

I've created a custom page template where i use WordPress posts to get images ( using feature images ) and I have made a gallery out of them.
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>
Now, what i want to achieve is to remove .middle class when the HREF is empty.
Tried a lot of i found on stack overflow but none of them was successful till now.
Thank you.

Considering that the_field("peoplelink") is empty:
<div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>">
<div class="pyete-vete">
PYETE VETE
</div>
</div>

You could try this:
<div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">

You could do something like this:
$('.middle').filter(function() {
return $("a", this).attr("href") == "";
}).removeClass("middle");
Demo
$('.middle').filter(function() {
return $("a", this).attr("href") == ""
}).removeClass("middle")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>

You could do something like this (untested):
if ($(".middle .pyete-vete a").attr('href') != '') {
$(".middle").removeClass("middle");
}

Using the jQuery each function to loop through all a tags and check if href is empty.
$('a').each(function(e){
if($(this).attr('href')=='')
$(this).closest('.middle').remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
<div class="middle">
<div class="pyete-vete">
PYETE
</div>
</div>
</div>

Get the id from a Img without the ID

i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
And this is my function in javascript:
function getID(e)
{
var x = e.src;
alert(x);
}
But it is not working, how do I get the id of each image if is being called from a database?

Why don't you get in the same way you wrote?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
function getID(id)
{
alert(id);
}

function getID(obj){
if(obj instanceof HTMLElement) {
alert(obj.getAttribute("data-target-id"));
}
else {
alert(obj);
}
}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 1</h3>
<p>Using data-* attribute</p>
<p>Button</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 2</h3>
<p>Passing id directly</p>
<p>Button</p>
</div>
</div>

you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
then this is script function
<script>
function getID(obj)
{
alert(obj.getAttribute("category-id"));
}
</script>
or add onclick function and send id in this function
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
this is script
<script>
function getID(id)
{
alert(id);
}
</script>
both will work.

Automatic reset when click another link

The Code Below is when you click a certain div. the hidden item will show up and change the css to display block. and i have multiple menu or option what im trying to do is when you click a certein div. and you click another one. the first one close automatically this is the indiciator <?php the_title(); ?> or id of the div.
Html
<a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')">
<div class="Career-entry" >
<div class="row" >
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'position' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'brandsubsidiary' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'work_location' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'date_posted' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'aplication_dead_line_' ); ?>
</div>
</div>
</div>
</a>
<div class="career-content" id="<?php the_title(); ?>" style="display:none;">
<div class="row">
<div class="col-md-6">
<h6> <i> Position Summary: </i></h6>
<?php the_field( 'position_summary' ); ?>
</div>
<div class="col-md-6">
<h6> <i> Requirments: </i></h6>
<?php if( have_rows('requirments') ):?>
<?php while ( have_rows('requirments') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h6> <i>Major Duties & Responsibilities: </i></h6>
<?php if( have_rows('major') ):?>
<?php while ( have_rows('major') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
<div class="col-md-6">
<h6> <i> Submit yoru resume: </i></h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 col-sm-12">
<?php echo do_shortcode( '[contact-form-7 id="112" title="Career"]' ); ?>
</div>
</div>
</div>
</div>
<hr class="career-hr">
<?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?>
<?php endwhile; ?>
</div>
Css
.red{
background-color: #e7f2ca;
display: block;
}
JS
<script>
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<script>
$('a#mylink').click(function() {
$(this).toggleClass('red blue');
});
</script>

Add class ex. 'autohide' to all divs you want to autohide. Then:
$('.autohide').click(function(){
$('.autohide').hide();
$(this).show();
})

Just tweak your code a bit, just use a variable to keep track of currently open section.
var current_open_section;
function showhide(id){
//hide open section first
if(current_open_section){
current_open_section.style.display = 'none';
}
//let the selected section be current open section
current_open_section = document.getElementById(id);
//show current open section
current_open_section.style.display = 'block';
}