I am trying to toggle div independently in while loop. but i am missing something. please help.
<style>
#panel, #flip {
padding: 5px;
text-align: justify;
background-color: #fff;
}
#panel {
padding: 20px;
display: none;
}
</style>
<script>
$(".scorec").click(function(){
$(this).next().slideToggle('slow');
});
</script>
<?php
while($row = mysqli_fetch_array($result))
{ ?>
<div class="scorec">
<button style="border: none;font-weight: bold;" id="flip"><a href="javascript:void(0);">View Answer</a></button>
</div>
<div class="container answer scorematcho" style="display:none;">
<p><span class="">Answer :</span> Option <span style="color: black;"><?php echo $row['answer']; ?></span></p>
<p><span>Explanation:</span></p>
<?php
if (empty($row['explanation'])) {
echo "No answer description available for this question.<br>";
} else { ?>
<div> <p><?php echo $row['explanation']; ?></p>
</div>
<?php }
?>
[off-topic]</> button, or type 3 backticks ``` on a separate line both before and after the code block.
I have done it for you this time.
An explanation of what’s going wrong?
Seriously, a bit more detail is needed. On the face of it, that loop (presuming there’s a closing } in your version) will run through your result set and open two <div>s, and potentially a third depending on whether there’s anything in the explanation column. There is a closing </div> missing though - you open the answer-container div, but never close it - again, unless that’s after the section you posted.
What does it do that it should not, or not do that it should?
I am sending the whole php code so that you can understand what is going wrong…
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<style type="text/css">
div.div-topics-index ul{padding:0 0 20 20px;border:0;list-style-image:url(../../img/folder.png);column-count: 2;}
div.div-topics-index ul li{margin: 8px;}
div.div-topics-index ul li a{}
.opt_design table td{font-size: 16px;padding: 5px;}
.opt_heading p{font-size: 17px;}
.opt_design table td a{font-weight: bold;}
#panel, #flip {
padding: 5px;
text-align: justify;
background-color: #fff;
}
#panel {
padding: 20px;
display: none;
}
</style>
above given code is java script and css.
<div class="container">
<?php
include '../../db.php' ;
if (isset($_GET['page_no']))
{
$page_no = $_GET['page_no'];
}
else
{
$page_no = 1;
}
$total_records_per_page = 7;
$offset = ($page_no-1) * $total_records_per_page;
$previous_page = $page_no - 1;
$next_page = $page_no + 1;
$adjacents = "2";
$result_count = mysqli_query($conn,"SELECT * FROM question_list WHERE catagory = 'Basic General Knowledge' AND main_cat = 'General Knowledge' ");
$total_records = mysqli_fetch_array($result_count);
$total_records = mysqli_num_rows($result_count);
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1; // total page minus 1
$result = mysqli_query($conn,"SELECT * FROM question_list WHERE catagory = 'Basic General Knowledge' AND main_cat = 'General Knowledge' order by id desc LIMIT $offset, $total_records_per_page");
if($total_records>0)
{
for ($i=$offset+1; $i <= $offset + $total_no_of_pages; $i++) {
while($row = mysqli_fetch_array($result))
{ ?>
<div class="container">
<table class="opt_design" cellspacing="0" cellpadding="0" border="0" width="70%" style="margin-top: 10px;">
<tr>
<td rowspan="2" valign="top" align="left"><?php echo $i;?>. </td>
<td class="opt_heading" valign="top"><p><?php echo $row['question']; ?></p></td>
</tr>
<tr>
<td valign="top">
<table class="mrg" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1%"> <a href="javascript:void(0);">A.</a></td>
<td width="99%"><?php echo $row['option_a']; ?></td>
</tr>
<tr>
<td width="1%"> <a href="javascript:void(0);">B.</a></td>
<td width="99%"><?php echo $row['option_b']; ?></td>
</tr>
<tr>
<td width="1%"> <a href="javascript:void(0);">C.</a></td>
<td width="99%"><?php echo $row['option_c']; ?></td>
</tr>
<tr>
<td width="1%"> <a href="javascript:void(0);">D.</a></td>
<td width="99%"><?php echo $row['option_d']; ?></td>
</tr>
</table>
</tr>
</td>
</table>
</div><div class="scorec">
<button style="border: none;font-weight: bold;" id="flip"><a href="javascript:void(0);" onclick="toggle_visibility('foo');">View Answer</a></button>
</div>
<div class="container answer" id="foo" style="display:none;">
<p><span class="">Answer :</span> Option <span style="color: black;"><?php echo $row['answer']; ?></span></p>
<p><span>Explanation:</span></p>
<?php
if (empty($row['explanation'])) {
echo "No answer description available for this question.<br>";
} else { ?>
<div> <p><?php echo $row['explanation']; ?></p>
</div>
<?php }
?>
</div>
<hr>
<?php $i++;
}
}
}
?>
</div>
But what is it actually doing wrong? I can see the code, but even if I load it onto my web server and run it, I won’t know what is “wrong” with it, unless it’s throwing error messages. And you’d have mentioned that.
just take a look in below link.
Basic General knowledge
When i click on view answer of each question it is only toggle the first answer.
All of your <div>s for the answer have the same id, they’re all id="foo". All ids on a page must be unique anyway, but if you’re actually using them to change visibility, how can it know which one you want to alter?#
I didn’t notice that before, I was too busy looking at the PHP to notice the html error.
1 Like
system
September 8, 2020, 1:24am
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
