Search code examples
javascripthtmlcss

Open DIV/SPAN on right side (with content) on link Click

I'm displaying the results in a HTML table for right and wrong answers. enter image description here

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>&#9989;<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?

Solution

  • if 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>