PHPLover PHPLover - 4 years ago 155
HTML Question

What's the issue in hide/show in jQuery code for following scenario?

I'm using PHP, Smarty, jQuery, etc. for my website. I'm displaying a list of questions, it's available answer options and a correct answer for that question. Now there is a hyperlink with each question. When user clicks on the hyperlink of a specific question the content (Options heading, actual options, correct answer) for that specific question should hide if it's displaying and it should get display if the content is hidden.

When content is shown the hyperlink should have text "Hide Answers" and when the content is hidden the text of hyperlink should be "Show Answers". One more thing is when the page loads initially the above content (Options heading, actual options, correct answer) for each question should be hidden and the text of hyperlink for each question should be "Show Answers". The HTML of this question list is as follows:

<div id="entrancelist">
<h2 class="heading">favourite questions</h2>
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:5px;" align="center">
<tbody>

<tr>
<td>
<div class="sub_name" id="" >
<div style="height:auto; overflow:hidden; width:100%;">
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 1.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="16164">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

</td></tr>
<tr class="question_info">
<td valign="top">
<b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>A 150 m long train is moving to north at a speed of 10 m/s. A parrot flying towards south with a speed of 5 m/s crosses the train. The time taken by the parrot the cross to train would be :<br></p></body></html>
</td>
<td valign="bottom" align="right"><b>QUE16164</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .

30 s

</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .

15 s

</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .

8 s

</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .

10 s

</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 4
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 2.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="38552">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

</td></tr>
<tr class="question_info">
<td valign="top">
<b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>For figure 24, the correct relation is -<br><img height="110" src="http://www.entranceprime.com/upload_media/questions/original/1328941281_38.JPG" width="172"></p></body></html>
</td>
<td valign="bottom" align="right"><b>QUE38552</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=9329a28849bd94b3bcc49e3a4b69a595.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=c8c15583e8f5742625e6d80c71f3a691.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=af6f96bda5c2f575fc42e4751c5772fe.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .

All of the above

</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 4
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 3.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="80763">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

</td></tr>
<tr class="question_info">
<td valign="top">
<b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p></body></html>
</td>
<td valign="bottom" align="right"><b>QUE80763</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .

<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">

</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 1
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>


The jQuery code I tried to show-hide the content is as follows. Though it's not working fine for me. Everything of the question gets hidden when I click on a hyperlink. But I want the content hidden for each question when the form loads. On click of hyperlink it should work for concerned question. So please help me to achieve this:

$(document).ready(function(){

$(".show-ans").each(function(){
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
});

$(".show-ans").click(function(e){

e.preventDefault();
if($(this).parent().parent().parent().children("tr:last").is(":visible"))
{
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
}
else
{
$(this).parent().parent().parent().children("tr:not(:first)").show();
$(this).html("Hide Answer");
}
});

});


The JS Fiddle link is :http://jsfiddle.net/8cxL2/ But it's not working as per my requirement.

Answer Source

try this code,

$(this).parent().parent().parent().children("tr:not(:first)").next().next().hide();

instead of,

$(this).parent().parent().parent().children("tr:not(:first)").hide();

SEE THIS FIDDLE DEMO

I hope this will help you...

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download