I'm displaying the results in a HTML table for right and wrong answers.
Each question has an "Explain Link" as the last colum of the table. If clicked, I want a new DIV or SPAN open adjacent to it on the right side (expand as needed). It will show the detailed explanation for that particular question. It will include text which can be HTML formatted with h2, h3, p tags, and may also include images ("<img src" kind). Clicking again on the same or different question "Explain Link" should close that open DIV or SPAN.
This is what I've tried:
Javascript:
<script>
$(function () {
$('#button-1').click(function(){
$('#popup-1').animate({height:'500px'}, 500);
});
});
</script>
HTML:
<tr><td>Q.2<td>C<td>C<td>✅<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
CSS:
#popup-1{
height: 0px;
width: 100%;
float: right;
overflow: hidden;
background: #efefef;
}
Any inputs on what is going wrong and amends to make?
I'm displaying the results in a HTML table for right and wrong answers.
Each question has an "Explain Link" as the last colum of the table. If clicked, I want a new DIV or SPAN open adjacent to it on the right side (expand as needed). It will show the detailed explanation for that particular question. It will include text which can be HTML formatted with h2, h3, p tags, and may also include images ("<img src" kind). Clicking again on the same or different question "Explain Link" should close that open DIV or SPAN.
This is what I've tried:
Javascript:
<script>
$(function () {
$('#button-1').click(function(){
$('#popup-1').animate({height:'500px'}, 500);
});
});
</script>
HTML:
<tr><td>Q.2<td>C<td>C<td>✅<td><a href='#' id="button-1">Explain</a><span id='popup-1'>Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
CSS:
#popup-1{
height: 0px;
width: 100%;
float: right;
overflow: hidden;
background: #efefef;
}
Any inputs on what is going wrong and amends to make?
Share Improve this question edited 2 days ago levent001 asked 2 days ago levent001levent001 2022 silver badges8 bronze badges 8 | Show 3 more comments2 Answers
Reset to default 9if you want achive this without JS its easier to use <details>
the simplest and most semantic HTML solution is to use the <details> element.
like below you can also style this:
summary::marker {
content: " ";
}
summary {
color:blue;
cursor:pointer;
text-decoration:underline;
}<details>
<summary>Explain</summary>
<!-- add what you need -->
<h2>hello world</h2>
<p>explain what you want</p>
<!-- add what you need -->
</details>add / make changes to the css file as mentioned below
a {
margin-right: 1rem;
}
.explain {
display: none;
}
.dets {
display: flex;
}
add the below javascript function to your scripts file
function show(e) {
var prev = e.parentNode.children[1].style.display;
$(".explain").css("display", "none");
$(".explain").css("height", "0px");
if (prev != "block") {
e.parentNode.children[1].style.display = "block";
e.parentNode.children[1].animate({ height: '500px' }, 500,);
setTimeout(function () {
e.parentNode.children[1].style.height = "500px";
},499);
}
}
wrap the <a> and <span> in a div, make the following changes in <a> tag also add the class explain to the span
<div class="dets">
<a href="javascript:void(0)" onclick="show(this)">Explain</a>
<span id='popup-1' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
</div>
by making the above changes you will achieve what you want,
so basically the whole idea behind this is, you will have a parent div name DETS which will contain the <a> tag and the <span> and the this div's display is set to flex, Read more about display types, it is set to flex as you want to display it to the right side of the explain button
added href="javascript:void(0)" onclick="show(this)" to the <a> tag , which basically means it prevents the default behaviour of reloading or opening a new tab, and onclick calls a javascript function,
in the javascript function we first save the current state of the explaintion div/span, later we hide and set the height of all the explaination divs to zero, meaning every explaintion is hidden, then we check the previous state of the current explaintion span, if is was already hidden or not shown then display it , with an 500ms animation from 0-500px height
setTimeout(function () {
e.parentNode.children[1].style.height = "500px";
},499);
this is used to fix the height at 500px after a delay
check it out below
function show(e) {
var prev = e.parentNode.children[1].style.display;
$(".explain").css("display", "none");
$(".explain").css("height", "0px");
if (prev != "block") {
e.parentNode.children[1].style.display = "block";
e.parentNode.children[1].animate({ height: '500px' }, 500,);
setTimeout(function () {
e.parentNode.children[1].style.height = "500px";
}, 499);
}
} a {
margin-right: 1rem;
}
.explain {
display: none;
}
.dets {
display: flex;
}<html>
<script src="https://ajax.googleapis/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<table border="1">
<tr>
<th>Q</th>
<th>YA</th>
<th>CA</th>
<th>RES</th>
<th width="100%">DETAILS</th>
</tr>
<tr>
<td>1</td>
<td>x</td>
<td>x</td>
<td>YES</td>
<td width="100%">
<div class="dets">
<a href="javascript:void(0)" onclick="show(this)">Explain</a>
<span id='popup-3' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img
src='img-explain-q2.jpg'></img></span>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>y</td>
<td>a</td>
<td>NO</td>
<td width="100%">
<div class="dets">
<a href="javascript:void(0)" onclick="show(this)">Explain</a>
<span id='popup-2' class="explain">Explanation of answer<br>Goes<br>here<br>including images: <img src='img-explain-q2.jpg'></img></span>
</div>
</td>
</tr>
</table>
</body>
</html>to display the explanation below the explain button
change
.dets {
display: flex;
}
to
.dets {
display: block;
}
i hope this helped you out, if any queries related to the answer, feel free to ask
$('#button-1')supposed to select? – C3roe Commented 2 days ago<>) – Lã Ngọc Hải Commented 2 days ago$('#button-1')should select here. Where do you have any element with the IDbutton-1? – C3roe Commented 2 days ago