{"id":2229,"date":"2012-03-16T18:39:47","date_gmt":"2012-03-16T18:39:47","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2229"},"modified":"2019-06-03T09:54:08","modified_gmt":"2019-06-03T09:54:08","slug":"mostrar-y-ocultar-contenido-con-hide-y-show","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/","title":{"rendered":"Mostrar y ocultar contenido con hide y show"},"content":{"rendered":"

Ofrecer la posibilidad de mostrar y ocultar contenido<\/strong> seg\u00fan la petici\u00f3n del usuario es una t\u00e9cnica que no falla cuando deseas mantener una p\u00e1gina Web sencilla, minimalista y, en definitiva, no muy cargada de mucho contenido.<\/p>\n

Una de las cosas que m\u00e1s nos interesan a los desarrolladores de p\u00e1ginas Webs es realizar un sitio con contenido din\u00e1mico y que sobre todo sea completamente atractivo para el usuario. En la mayor\u00eda de los casos, tenemos demasiada informaci\u00f3n que mostrar. Mostrar todo de golpe puede ser un efecto de estr\u00e9s para el usuario. Lo ideal es mostrarle lo m\u00e1s importante y si desea ver m\u00e1s ya ir\u00e1 entrando en las secciones o en los bloques ocultos.<\/p>\n

La informaci\u00f3n que no deseamos mostrar de forma directa salvo que el usuario quiera verlo (tales como comentarios, informaci\u00f3n extra, etc) se pueden ocultar y solo mostrarse cuando el usuario as\u00ed lo decida. Si es esto lo que est\u00e1s buscando, en este tutorial te vamos a explicar una forma sencilla de conseguirlo.<\/p>\n

En este art\u00edculo vamos utilizar las funciones hide()<\/em> y show()<\/em> incluidas en la librer\u00eda jQuery<\/strong> + CSS y Bootstrap 4<\/strong> para lograr este prop\u00f3sito.<\/p>\n

Para mostrar y ocultar un contenedor debemos instanciar un div con un ID \u00fanico y en el estilo incluir style=\u201ddisplay:none;\u201d, como por ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> id<\/span>=<\/span>"content"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"element"<\/span> class<\/span>=<\/span>"col-lg-12"<\/span> style<\/span>=<\/span>"display: none;"<\/span>><\/span> \n        <div<\/span><\/a> id<\/span>=<\/span>"close"<\/span>><a<\/span><\/a> class<\/span>=<\/span>"btn btn-small"<\/span> href<\/span>=<\/span>"#"<\/span> id<\/span>=<\/span>"hide"<\/span> title<\/span>=<\/span>"Cerrar"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-close"<\/span>><\/<\/span>i<\/span><\/a>><\/<\/span>a<\/span><\/a>><\/<\/span>div<\/span><\/a>><\/span>\n        <h2<\/span><\/a>><\/span>What is Lorem Ipsum?<\/<\/span>h2<\/span><\/a>><\/span>\n        <p<\/span><\/a>><\/span>Lorem Ipsum...<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Tambi\u00e9n ser\u00e1 necesario tener un enlace con identificador \u00fanico para capturar su evento con jQuery<\/strong> con el objetivo de realizar la llamada a show().<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<p<\/span><\/a>><a<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span> href<\/span>=<\/span>"#"<\/span> id<\/span>=<\/span>"show"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-eye"<\/span>><\/<\/span>i<\/span><\/a>><\/span> Mostrar<\/<\/span>a<\/span><\/a>><\/<\/span>p<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En la cabecera de la p\u00e1gina o dentro de la etiqueta <head> se debe incluir la librer\u00eda jQuery<\/strong> + la l\u00f3gica de mostrar y ocultar el contenido y algunos estilos para mejorar la presencia de los elementos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script src="https:\/\/code.jquery.com\/jquery-3.2.1.js"><\/script>\n<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>"#hide"<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>"#element"<\/span>)<\/span>.hide<\/span>(<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n \n    $(<\/span>"#show"<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>"#element"<\/span>)<\/span>.show<\/span>(<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Al hacer clic en el elemento con id=\u00bbshow\u00bb estamos llamando a la funci\u00f3n show()<\/em> de jQuery<\/strong> para mostrar el contenido que hay escondido en el contenedor con id=\u00bbelement\u00bb.<\/p>\n
Y si hacemos clic en el elemento con id=\u00bbhide\u00bb estamos mandando a esconder el elemento con id=\u00bbelement\u00bb utilizando la funci\u00f3n hide()<\/em> de jQuery<\/strong>.<\/p>\n
El ejemplo est\u00e1 desarrollado utilizando los identificadores de los elementos pero tambi\u00e9n se puede hacer utilizando el atributo \u00abclass\u00bb que puede resultar mucho m\u00e1s interesante si hay m\u00e1s de un elemento oculto en la p\u00e1gina Web.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.<\/p>\n","protected":false},"author":1,"featured_media":7320,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[74],"class_list":["post-2229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-contenedores"],"yoast_head":"\nMostrar y ocultar contenido con hide y show - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mostrar y ocultar contenido con hide y show - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-16T18:39:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-03T09:54:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/\",\"name\":\"Mostrar y ocultar contenido con hide y show - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png\",\"datePublished\":\"2012-03-16T18:39:47+00:00\",\"dateModified\":\"2019-06-03T09:54:08+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mostrar y ocultar contenido con hide y show\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mostrar y ocultar contenido con hide y show - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Mostrar y ocultar contenido con hide y show - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-16T18:39:47+00:00","article_modified_time":"2019-06-03T09:54:08+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/","url":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/","name":"Mostrar y ocultar contenido con hide y show - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png","datePublished":"2012-03-16T18:39:47+00:00","dateModified":"2019-06-03T09:54:08+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite mostrar y ocultar contenido con jQuery utilizando las funciones show() y hide(). Muy f\u00e1cil de entender.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/mostrar-y-ocultar-contenido-con-hide-y-show.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-y-ocultar-contenido-con-hide-y-show\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mostrar y ocultar contenido con hide y show"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2229"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7320"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}