Lo que quiero conseguir es que dependiendo de las plantas que tenga mi empresa, me seleccione un .css
diferente con estilos personalizados. Si tengo de 0 a 3 me jale una hoja específica, si tengo de 4 a 6 me jale otra diferente etc.
Esto lo quiero hacer porque actualmente estoy trabajando con una accordeón y dicho accordeón no es del todo dinámico ya que funciona corrrectamente pero si aumentan o disminuyen las plantas el accordeón no ocupa todo el espacio que debería.
Espero que se pueda apreciar el espacio que queda libre, ese espacio aumentará conforme menos plantas haya, lo cual está erroneo ya que quiero que se aproveche todo el espacio por lo cual quisiera hacer 3 .css
personalizados para tres diferentes posibilidades de la base de datos y seleccionarlos cuando se pueda.
- Primer .css (0-3 plantas)
- Segundo .css (4-8 plantas)
- Tercer .css(9-12 plantas)
El espacio que quiero aprovechar es el que se realiza al momento de abririse.
Código de css
para abrir cada accordeón:
.ia-container input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 65%;
}
Como se puede apreciar el left:65%
, es el que genera que se abra ciertas dimensiones cada accordeón y es estático, quiero generarlo dinámicamente.