solucion_mostrar_ocultar_2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Solución mostrar/ocultar</title>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  6.  
  7. $(function() {
  8.  
  9. const seleccion = $('p.detalle');
  10.  
  11. // Delegación de eventos
  12. $('#botones').on('click', 'button', function() {
  13. switch($(this).attr('id')) {
  14. case 'boton1': seleccion.hide(); break;
  15. case 'boton2': seleccion.show(); break;
  16. case 'boton3': seleccion.hide(1000); break;
  17. case 'boton4': seleccion.show(1000); break;
  18. case 'boton5': seleccion.toggle(); break;
  19. }
  20. });
  21.  
  22. });
  23.  
  24. </script>
  25. .detalle { font-size:0.8em; }
  26. </style>
  27. </head>
  28. <h1>Solución mostrar/ocultar</h1>
  29. <p id="botones">
  30. <button id="boton1">Ocultar</button>
  31. <button id="boton2">Mostrar</button>
  32. <button id="boton3">Ocultar animado</button>
  33. <button id="boton4">Mostrar animado</button>
  34. <button id="boton5">Conmutar</button>
  35. </p>
  36. <p>
  37. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique tincidunt pellentesque. In et sodales ligula. Donec et vestibulum neque, sit amet finibus mauris. Donec varius at ante id elementum. Donec bibendum suscipit enim, a blandit eros tincidunt eget. Integer tincidunt vehicula ligula eu pellentesque. Sed quis ultricies enim. Nunc lobortis risus eget ligula semper venenatis.
  38. </p>
  39. <p class="detalle">
  40. Aliquam vitae sem nec lectus consectetur ultrices eu eget ipsum. Vestibulum vehicula dui non accumsan egestas. Donec et porttitor ligula. Nam sit amet ipsum neque. Nulla tortor eros, posuere at ultrices imperdiet, condimentum nec nisi. Quisque ut pellentesque turpis, id laoreet ligula. Nulla facilisi. Morbi malesuada lorem ex, ut cursus lacus cursus a. Vivamus at magna sit amet ante sollicitudin malesuada vel vitae orci. Donec iaculis libero eu bibendum posuere. In sapien lectus, tempor ac efficitur in, lacinia eu ligula. Praesent bibendum eleifend suscipit.
  41. </p>
  42. <p>
  43. Nam in diam a ante sodales tincidunt et non nulla. Sed eu est egestas, auctor quam non, pharetra leo. Ut eget tellus tellus. Aliquam quis leo varius, sodales magna eget, accumsan nibh. Cras vel tincidunt nunc. Sed tincidunt et ante at sagittis. Donec eget lectus nisi. In volutpat ex erat, in pellentesque orci dictum quis. Mauris vel iaculis ipsum, quis pretium metus. Sed mattis posuere magna, non tempor mi consectetur eget.
  44. </p>
  45. <p class="detalle">
  46. Proin tellus nibh, hendrerit at nulla non, dapibus venenatis enim. Sed urna elit, mollis eu magna id, aliquam tincidunt velit. Duis sed purus euismod, dignissim nunc sed, mollis ligula. Praesent eu leo feugiat, placerat diam ut, maximus justo. Donec non aliquet nulla, sed accumsan magna. Nulla nec finibus urna. Sed porta justo at odio congue accumsan ac at ante. Praesent eu diam at eros rhoncus posuere. Duis faucibus dapibus eros, id efficitur risus porta sit amet. Pellentesque vitae ullamcorper augue, fringilla ultricies dui. Aliquam tempor, ante a blandit vulputate, lorem neque finibus quam, laoreet ultricies nisi orci sed augue. Proin semper erat vel ipsum ultricies egestas. Nulla tellus erat, cursus vel sagittis et, blandit sit amet nunc.
  47. </p>
  48. <p>
  49. Praesent pellentesque urna libero, dapibus dignissim metus gravida id. Nunc feugiat tristique enim a venenatis. In venenatis ex a quam volutpat tincidunt. Fusce ac metus lacus. Donec sed turpis sit amet metus porta fermentum a nec lectus. Mauris non suscipit urna. In egestas, lorem et molestie suscipit, massa purus blandit nibh, eget ornare erat ligula nec tellus. Vestibulum tincidunt viverra metus, accumsan convallis orci commodo eu. Mauris sed tortor metus.
  50. </p>
  51. <p class="detalle">
  52. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla lacus turpis, lobortis cursus tristique nec, viverra ut ipsum. Maecenas sodales, dolor ut vulputate mollis, libero tortor fringilla eros, gravida dapibus magna ipsum vel nisi. Phasellus laoreet dui in dui elementum, sit amet vestibulum ligula euismod. Pellentesque quis rhoncus nibh. In ac hendrerit dui. Suspendisse eget lobortis nisi. Nulla quis massa tempor, auctor turpis et, pulvinar dui.
  53. </p>
  54. <p>
  55. Quisque malesuada vitae sapien vel accumsan. Aliquam non pulvinar nunc, at congue est. Etiam mattis aliquet ante ac eleifend. Nam vulputate lobortis dui non gravida. Phasellus eget venenatis erat. Sed elit libero, volutpat vitae nulla vitae, finibus aliquet augue. Sed sed rutrum mi. Donec mauris quam, convallis ut ligula ut, vehicula ultrices nulla. Nulla porta lectus at augue dapibus aliquet.
  56. </p>
  57. <p class="detalle">
  58. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer a egestas metus. Nullam vel justo non mauris feugiat posuere. Quisque arcu arcu, consectetur eu risus quis, dignissim tempus leo. Suspendisse a elementum augue. Vestibulum augue nisi, lobortis posuere bibendum in, vulputate sit amet dui. Nulla pharetra ante ut lacus pellentesque volutpat. Etiam venenatis turpis vel tristique tristique. Ut massa metus, scelerisque et nibh id, viverra aliquam augue.
  59. </p>
  60. <p>
  61. Vivamus quis congue ante. Etiam sagittis, quam eget volutpat lobortis, tellus massa pretium leo, nec ornare diam metus in purus. Vestibulum volutpat eu lorem sed blandit. Fusce ullamcorper, urna eu facilisis viverra, est quam ultricies nunc, a hendrerit lacus velit sit amet nisl. Cras pellentesque nisi nec nunc aliquet semper. Aliquam auctor tortor eget lectus ornare cursus. Pellentesque ligula lectus, finibus ac mauris at, cursus venenatis tortor.
  62. </p>
  63. <p class="detalle">
  64. Sed eget maximus orci. Nulla libero neque, porttitor a viverra nec, ornare a neque. Nam facilisis at purus et commodo. Etiam vitae augue sed neque fringilla ultrices quis vitae est. Curabitur massa nunc, luctus nec consectetur in, eleifend nec arcu. Vivamus ut justo auctor, porttitor risus non, aliquam purus. In a ipsum congue, rhoncus tortor vitae, luctus urna. Vestibulum aliquam molestie enim sit amet ullamcorper. Donec at diam eu libero vestibulum sollicitudin. Quisque rutrum facilisis lorem eget dictum. Vivamus non purus et ante mattis varius vel ut leo. Maecenas fermentum lacus ac risus aliquam vulputate. Ut quis magna erat. Sed semper euismod aliquet. Etiam blandit massa eget ligula fermentum, ac aliquam massa hendrerit. In interdum volutpat tempus.
  65. </p>
  66.  
  67. </body>
  68. </html>

Proinf.net