DIV element inside of LI

Question

I have a problem showing a list with hidden divs. I use the toggleSlide() function from jQuery to show/hide the DIV elements whenever you click the LI element.

The problem comes when the DIV comes visible, as it gets over the rest of the elements instead of making a space between list elements to print it there.

Currently, this is the code I have:

elementList.append('<li class="element" onclick="toggleDetails(this);"><span class="elementName">' + elementsArray[i]["descMarca"] + ' ' + elementsArray[i]["descModelo"] + '</span>'
                            + '<div class="elementDetails hidden"><label for="marca">Marca:</label><span>' + elementsArray[i]["descMarca"] + '</span>'
                            + '<label for="modelo">Modelo:</label><span id="modelo">' + elementsArray[i]["descModelo"] + '</span>'
                            + '<label for="serialN">Licencia:</label><span id="serialN">' + elementsArray[i]["serialN"] + '</span>'
                            + '<label for="productN">Número de producto:</label><span id="productN">' + elementsArray[i]["productN"] + '</span>'
                            + '<label for="fecAlta">Fecha de alta:</label><span id="fecAlta">' + fecAlta + '</span>'
                            + '<label for="fecRenov">Fecha de renovación:</label><span id="fecRenov">' + fecRenov + '</span></div></li>');
elementList.css('display', 'block');

Being the required CSS this one:

.element {
    height: 5vh;
    line-height: 5vh;
    padding-left: 20px;
    vertical-align: center;
    cursor: pointer;
}

.elementDetails {
    width: 50%;
    margin-left: 25%;
}

If I set display: inline; on the LI element, it works as intended. The issue comes when I want a vertical list, so it can't be done setting display: inline; property to each LI element.

Thanks in advance.

Answer 1

You need to set display: block; (instead of display: inline; ) to the li element