How to fix the value from php to use bootstrap? - php

Question

I am using bootstrap accordion style to show the list of speakers in our website.
For that, I have a list of speakers table in my database. And I am getting the fields using php. In the following way.
<?php
global $wpdb;
$result = $wpdb->get_results( "SELECT * FROM `Invited_Speakers`");
foreach ( $result as $print ) { ?>
<tr style="width:100%">
<div class="maindrop" style="float: left; text-align: justify;">
<a class="bar" style="text-decoration: none;" href="#<?php echo $print->Last_Name;?>"> <?php echo $print->First_Name; ?> <?php echo $print->Last_Name; ?>, <?php echo $print->Institue_Address; ?>
</a>
<div id="<?php echo $print->Last_Name;?>" class="dropbox">
<img style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="left" />
<table style="width:79%;float: right;">
<tbody>
<td > <?php echo $print->Designation;?> </td>
</tr>
<tr>
<td ><?php echo $print->Department_Address;?></td>
</tr>
<tr>
<td> Email Id: <?php echo $print->Email_Id;?></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?> </td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td><?php echo $print->Acheivements;?>
<button style="float:right;"><a style="color: white;" href="<?php echo $print->Home_page_Link;?>" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>
</div>
<?php }
?>
It has given me as expected, but the problem is,
when I click the bar, it should show me the dropbox which contains the details of the speaker. But it is not showing.
It seems like the link is not available.
How to rectify this??
I have around 60 speakers and for everybody, writing html code manually does not sound like good idea.
Link of the page is given here: Click here
In the above link, the problem is with the invited speakers list.
Thanks in advance
CSS:
.maindrop {
width: 100%;
}
.bar {
padding: 0px;
display: block;
border-bottom:1px solid #06394D;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight:300;
transition: .5s ease-out;
}
.bar:hover {
background: #F6F7F7;
padding: 15px;
text-decoration: none;
}
.dropbox {
max-height: 0;
transition: .2s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 5000px;
}

Answer 1

Assuming you're using Bootstrap 3, '.dropbox' does not exist as a class. What I believe you're looking for is an Accordion, which can be found under the Collapse documentation section.
Here is a little sample that should get you started in the right direction. The $count is there to make sure each row has a unique identifier to open it's associated accordion. I simplified the markup from which you have but you should be fine replacing with what you need.
<table style="width:100%">
<?php
$count = 0;
foreach($result as $print): ?>
<tr data-toggle="collapse" href="#collapseExample-<?php echo $count; ?>" aria-expanded="false" aria-controls="collapseExample-<?php echo $count; ?>">
<td>Speaker Name</td>
<td>Speaker Description</td>
</tr>
<tr class="collapse" id="collapseExample-<?php echo $count?>">
<td>This should be hidden</td>
</tr>
<?php $count++; endforeach; ?>
</table>