I am facing an issue displaying a list with hidden divs. The toggleSlide() function from jQuery is used to show/hide the DIV elements whenever the LI element is clicked.
The problem arises when the DIV becomes visible; it overlays the other elements instead of creating space between list elements to display it there.
Below is the current code snippet:
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');
The necessary CSS styles are as follows:
.element {
height: 5vh;
line-height: 5vh;
padding-left: 20px;
vertical-align: center;
cursor: pointer;
}
.elementDetails {
width: 50%;
margin-left: 25%;
}
Setting display: inline; on the LI element resolves the issue, but it doesn't work for a vertical list. Unfortunately, applying this property to each LI element also does not accomplish the desired outcome.
Thank you in advance.