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

  • 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.com/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