line position issue in collapse div

[zakk616]

the lines don't work currect in a collapsing div.

https://jsfiddle.net/zakk616/mtj2hpb7/11/

is there any solution when the collapse changes the lines should re-render?

Some Screenshots:
when collapse is open

when collapse is closed

[anseki]

Hi @zakk616, thank you for the comment.
You can use position method for that.
However, it seems that you don't need that, you only want to hide the lines maybe.

[zakk616]

I implemented this solution:

var lines = [];
function drawLines(length) {
        for (let i = 1; i < length; i++) {
            var start = document.getElementById('history-card-' + i);
            var end = document.getElementById('history-card-' + (i + 1));

            lines.push(new LeaderLine(start, end, {
                color: '#00b97d', size: 2, path: 'grid',
                startSocket: 'right',
                endSocket: 'left',
            }));
        }
    }

    function showHide() {
        if (lines.length > 0) {
            lines.forEach(line => {
                line.remove();
                lines = [];
            });
        }
        else {
            setTimeout(() => {
                drawLines(data.length);
            }, 100);
        }
    }

now on collapse i call showHide()

[anseki]

That is not good code because that removes lines wastefully instead of hiding lines, and also that clears lines repeatedly that is not required.
Good luck. 👍