Si alguna vez has visto alguna de mis publicaciones sobre los planes de Microsoft, normalmente he incluido una captura de pantalla que muestra todos los elementos expandidos. Por ejemplo, en mi publicación:
o
Recientemente me preguntaron cómo lo logré, ya que no parece posible en esa página.
Bueno, para aquellos que buscan la solución, no hay magia aquí, solo HTML/JS/jQuery simple. Revisé el código HTML de la página y pude ver que estaba construida sobre una tabla y que, por defecto, cada fila tenía una sintaxis como la siguiente:
<td> <div class="ow-col-header"></div> <div class="ow-col-content x-hidden"></div> </td>
¡Observe que el segundo div tiene una clase oculta en X! Cuando hace clic en cualquier elemento individual para ver los detalles, se elimina esa clase oculta en X.
Entonces, fue solo una cuestión de eliminar esa clase de todos los elementos, en lugar de solo de los elementos individuales en los que se hace clic, y para eso jQuery nos hace la vida muy simple.
Ahora bien, tenga en cuenta que hay diferentes maneras de abordar esto, pero para mis necesidades mantuve las cosas muy simples.
Hice clic derecho en la página y seleccioné Inspeccionar
Luego fui a la Consola y entró $(‘.ow-col-content’).removeClass(‘x-hidden’) y presioné Enter para ejecutar el comando
¡Y ahí lo tienes!
Así que ahí lo tienes, una sola línea de jQuery y puedes ver todos los detalles de una sola vez en lugar de tener que hacer clic continuamente en cada elemento uno por uno.
