20

En el trabajo nos encontramos con un problema interesante: tenemos una página con una lista desplegable que, cuando cambia la opción seleccionada, actualiza los valores de una seria de elementos a partir de los valores de una variable en JSON.

El HTML es algo como esto (simplificado):

<select id="paises">
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
</select>

<div id="valores">
  Pais: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

Y el JSON es algo parecido a esto (simplificado):

info = {
    "chile": {
        "nombre": "Chile",
        "telefono": "123456789",
        "email": "[email protected]"
    },
    "colombia": {
        "nombre": "Colombia",
        "telefono": "192837465",
        "email": "[email protected]"
    },
    "ecuador": {
        "nombre": "Ecuador",
        "telefono": "987654321",
        "email": "[email protected]"
    }
}

El código JavaScript no es relevante para la pregunta, pero la idea es sencilla: dependiendo del país seleccionado, se actualizarán los span. Por ejemplo, si se selecciona Chile, el span con id "pais" contendrá "Chile", el span con id "telefono" mostrará "123456789", etc, etc.

Ahora esa página se ha movido a un nuevo CMS y, por diferentes motivos, estamos limitados en los componentes que podemos usar y ninguno de ellos permite incorporar JavaScript (ni siquiera inline), sólo nos deja introducir HTML y CSS.


Entonces la pregunta sería: ¿cómo se puede simular el comportamiento descrito arriba, pero exclusivamente usando HTML+CSS sin ningún tipo de JavaScript o JSON?

En cuanto a HTML y CSS no tenemos limitaciones: podemos reordenar/organizar los elementos como queramos, podemos añadir elementos nuevos/eliminar elementos ya existentes, podemos añadir tanto código como queramos... mientras que no contenga ningún script, sólo HTML y CSS.

Por ejemplo, nosotros finalmente encontramos una solución (la compartiré en las respuestas abajo por si a alguien le sirve de inspiración) sustituyendo el select por una lista ul, transformando el JSON a CSS (con :before y content) y con una serie de inputs escondidos... pero el problema es que ocupa demasiado espacio y queremos saber si habría otro método diferente.

4
  • La solución que habéis encontrado me parece soberbia ¿Qué quieres decir con que ocupa demasiado? A mi me parece que está muy optimizado el código teniendo en cuenta lo complejo del asunto, tienes que meter todos los datos en algún sitio, no creo que haya manera de que ocupe menos.
    – user7176
    Commented el 8 jun. 2016 a las 6:48
  • 2
    Ocupa demasiado en el sentido de que hay muchos elementos (los inputs) que realmente no "aportan" nada. Además, los datos estarían en el CSS, que debería ser para estilos y maquetación; quizás se podrían poner directamente en HTML o en atributos data-•.
    – Alvaro Montoro
    Commented el 8 jun. 2016 a las 10:55
  • 2
    Si un CMS limita los contenidos que los usuarios pueden usar la mejor opción es cambiar de CMS, tarde o temprano estará lleno de workarounds que harán muy dificil mantenerla.
    – dwarandae
    Commented el 9 jun. 2016 a las 21:54
  • 2
    @dwarandae El CMS permite poner cualquier cosa, son los componentes corporativos los que no nos lo permiten y los que nos condicionan en este caso. Aunque personalmente tampoco le tengo un apego especial a CQ5.
    – Alvaro Montoro
    Commented el 9 jun. 2016 a las 22:35

3 respuestas 3

8

Aunque una solución ingeniosa, más que un problema de espacio, yo le veo dos pegas:

  • Algo compleja de mantener: estás introduciendo contenido en los estilos, por lo que hay más sitios donde habrá que modificar la información.
  • Poco accesible: al ser parte del estilo, los datos no son indexados por buscadores, no es "percibible" (eg: no se puede leer por un lector automático) y, lo que es peor, no se puede copiar, algo fundamental para datos de contacto.

Te propongo darle una vuelta a tu propuesta y dejar la información dentro del cuerpo html. Algo así:

div#paises > div { display: none; }
#chile:checked~ div#chile { display: block; }
#colombia:checked~ div#colombia { display: block; }
#ecuador:checked~ div#ecuador { display: block; }
<ul id="dropdown">
    <li>
      Selecciona un país
      <ul>
        <li><label for="chile">Chile</label></li>
        <li><label for="colombia">Colombia</label></li>
        <li><label for="ecuador">Ecuador</label></li>
      </ul>
    </li>
</ul>

<div id="paises">
      <input type="radio" name="paises" id="chile" />
      <input type="radio" name="paises" id="colombia" />
      <input type="radio" name="paises" id="ecuador" />
      <div id="chile">
        País: Chile <br/>
        Teléfono: 123456789 <br/>
        Email: [email protected]
      </div>
      <div id="colombia">
        País: Colombia <br/>
        Teléfono: 987654321 <br/>
        Email: [email protected]
      </div>
      <div id="ecuador">
        País: Ecuador <br/>
        Teléfono: 192837465 <br/>
        Email: [email protected]
      </div>
</div>

2
  • 2
    Interesante, yo no había caído en que no puedes seleccionar el texto. Metiéndolo en el HTML sí que se podría usar :target como propone Alvaro y librarse de los label y radios a cambio de tener los 30 registros en el código, no se ahorra en espacio pero es más limpio
    – user7176
    Commented el 8 jun. 2016 a las 9:51
  • 2
    Ésta es una solución más limpia y accesible. Voy a echarle un ojo, pero creo que algo como esto combinado con :target (para evitar tener todos los inputs) es lo que acabaremos haciendo.
    – Alvaro Montoro
    Commented el 8 jun. 2016 a las 10:45
6

Ésta es la solución que encontramos (la dejo aquí por si ayuda a la gente a ver qué es lo que buscábamos y/o por si sirve de referencia), aunque el problema que presenta es que se complica mucho (la lista de países no es sólo de 3, sino de 30) y acaba necesitando mucho código extra.

Seguramente se podría hacer algo con :target en lugar de :checked y simplificaría las cosas (se podrían cambiar todos los label por a y se evitarían todos los checkboxes).

La idea es la siguiente:

  • En el HMTL:
    • Quitamos el select y simulamos una lista desplegable usando ul;
    • Añadimos un input de tipo radio por cada país, antes de los campos que queremos que se actualicen;
    • En cada uno de los li del ul, añadimos un label para cada uno de los input que creamos en el paso anterior;
  • En el CSS:
    • Añadimos los diferentes estilos para simular el dropdown;
    • Usando la pseudo-clase :checked y el selector ~, añadimos reglas CSS que añadirán el contenido dependiendo del radio que esté seleccionado en cada momento.

El código queda así al final:

#dropdown, #dropdown > li > ul  { 
  width:200px; 
  overflow:visible;
  line-height:20px; 
  border:1px solid gray;
  background:white;
  list-style:none;
  padding-left:0;
  margin-left:0;
  position:relative;
}

#dropdown:after {
  content:"\25bc";
  position:absolute;
  font-size:0.75em;
  right:2px;
  top:0;
}

#dropdown > li { 
  margin-left:0; 
  line-height:20px;
  font-size:0.9em;
}

#dropdown > li > ul {
  display:none;
}


#dropdown > li:hover > ul {
  display:block;  
  position:absolute;
  left:-1px;
}

#dropdown > li > ul > li {
  margin-left:0; 
  line-height:20px;
  padding-left:2px;
}

#dropdown > li > ul > li:hover {
  background-color:rgba(0,0,0,0.05);
}

#dropdown > li > ul > li label {
  display:block;
}

input[name="paises"] { display:none; }


#chile:checked ~ #pais:before { content:"Chile"; }
#chile:checked ~ #telefono:before { content:"123456789"; }
#chile:checked ~ #email:before { content:"[email protected]"; }
#colombia:checked ~ #pais:before { content:"Colombia"; }
#colombia:checked ~ #telefono:before { content:"987654321"; }
#colombia:checked ~ #email:before { content:"[email protected]"; }
#ecuador:checked ~ #pais:before { content:"Ecuador"; }
#ecuador:checked ~ #telefono:before { content:"192837465"; }
#ecuador:checked ~ #email:before { content:"[email protected]"; }
<ul id="dropdown">
  <li>
    Selecciona un país
    <ul>
      <li><label for="chile">Chile</label></li>
      <li><label for="colombia">Colombia</label></li>
      <li><label for="ecuador">Ecuador</label></li>
    </ul>
  </li>
</ul>

<div>
  <input type="radio" name="paises" id="chile" />
  <input type="radio" name="paises" id="colombia" />
  <input type="radio" name="paises" id="ecuador" />
  País: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

1
  • Muy buena solución. Muy imaginativa. La verdad es que no se me ocurre una forma más sencilla de hacerlo. Pero voy a darle una vuelta, me ha gustado. Commented el 8 jun. 2016 a las 7:32
4

Usando solo el selector :target, se puede simplificar un poco.

body {background: #f3f5f6;}
ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 200px;
}
ul#dropdown {float: left;}
ul#dropdown li {
    position: relative;
    line-height:30px;
    z-index: 10;
    background: white;
    text-indent: 10px;
    border-top: 1px solid #eee;
}
ul#dropdown > li:before {
    content: "";
    border-color: #7d7d7d;
    border-style: solid;
    border-width: 0 1px 1px 0;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: 11px;
    transform: rotate(45deg);
    z-index: 100;
}
ul#dropdown > li:hover:before {transform: rotate(-135deg);top: 13px;}
ul#dropdown li a {display: block;}
ul#dropdown ul {display: none;}
ul#dropdown li:hover ul {display: block;}
ul#dropdown ul li:hover {background: #eee;}
div#paises {float: left;}
div#paises > div {
    background: white;
    width: 200px;
    margin-left: 10px;
    padding: 15px;
    display: none;
}
:target {display: block !important;}
<ul id="dropdown">
  <li>Selecciona un país
    <ul class="selector">
      <li><a href="#chile">Chile</a></li>
      <li><a href="#colombia">Colombia</a></li>
      <li><a href="#ecuador">Ecuador</a></li>
    </ul>
  </li>
</ul>

<div id="paises">
  <div id="chile">
    País: Chile <br/>
    Teléfono: 123456789 <br/>
    Email: [email protected]
  </div>
  <div id="colombia">
    País: Colombia <br/>
    Teléfono: 987654321 <br/>
    Email: [email protected]
  </div>
  <div id="ecuador">
    País: Ecuador <br/>
    Teléfono: 192837465 <br/>
    Email: [email protected]
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.