{"id":5384,"date":"2012-12-01T10:17:34","date_gmt":"2012-12-01T10:17:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5384"},"modified":"2019-04-04T05:11:35","modified_gmt":"2019-04-04T05:11:35","slug":"accordeon-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/","title":{"rendered":"Accordion me con jQuery"},"content":{"rendered":"

En este art\u00edculo vamos a ver como crear un men\u00fa accordion con jQuery<\/strong> sin necesidad de utilizar plugins ni c\u00f3digo de terceros. Realizar un men\u00fa accordion<\/strong> es m\u00e1s sencillo de lo que parece utilizando una funci\u00f3n de jQuery<\/strong> muy \u00fatil para mostrar u ocultar contenido escondido con algo de efecto.<\/p>\n

Estamos hablando de la funci\u00f3n slideToggle()<\/strong>. Esta funci\u00f3n incluida en la librer\u00eda jQuery<\/strong> nos permite principalmente tener elementos escondidos para mostrarlos al hacer click en un elemento padre o similar. Al volver a hacer click se vuelve a ocultar.<\/p>\n

Aspecto visual<\/h2>\n

En el ejemplo que vamos a ilustrar veremos como crear un men\u00fa accordion vertical <\/strong>con el siguiente formato:<\/p>\n

\"Accordeon<\/a><\/p>\n

Como puedes observar los estilos son realmente simples ya que el objetivo de este art\u00edulo no es realizar un men\u00fa accordion chulo sino su funcionalidad. El dise\u00f1o lo dejo a vuestra imaginaci\u00f3n.<\/p>\n

Inclusi\u00f3n de los estilos y c\u00f3digo JavaScript necesarios para hacer funcionar el accordion<\/h2>\n

Para implementar un men\u00fa accordion<\/strong> vertical sencillo en vuestra Web necesitar\u00e9is incorporar en el <head> de vuestra p\u00e1gina los estilos necesarios, la librer\u00eda jQuery<\/strong> y el c\u00f3digo que desplegar\u00e1 y ocultar\u00e1 las listas de los elementos padre del men\u00fa.<\/p>\n

La inclusi\u00f3n de la librer\u00eda jQuery<\/strong> y la captura del evento click de los elementos del accordion<\/strong> ser\u00e1n necesarios y lo puedes ver a continuaci\u00f3n:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script src=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script><\/span>\n<<\/span>script><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>'.block h2'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        $(<\/span>this<\/span>)<\/span>.parent<\/span>(<\/span>)<\/span>.find<\/span>(<\/span>'ul'<\/span>)<\/span>.slideToggle<\/span>(<\/span>'slow'<\/span>)<\/span>;<\/span>                          \n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
En el ejemplo estamos usando los siguientes estilos que puedes agregar a tu hoja de estilos directamente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.block<\/span> {<\/span>\n    width<\/span>:<\/span>100<\/span>%<\/span>;<\/span>\n    float<\/span>:<\/span>left<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span>1px<\/span>;<\/span>\n}<\/span>\n \n.block<\/span> h2 {<\/span>\n    width<\/span>:<\/span>96<\/span>%<\/span>;<\/span>\n    float<\/span>:<\/span>left<\/span>;<\/span>\n    background-color<\/span>:<\/span>#336600<\/span>;<\/span>\n    color<\/span>:<\/span>#FFFFFF<\/span>;<\/span>\n    cursor<\/span>:<\/span>pointer<\/span>;<\/span>\n    margin<\/span>:<\/span>0px<\/span>;<\/span>\n    padding<\/span>:<\/span>5px<\/span>;<\/span>\n}<\/span>\n \n.block<\/span> ul {<\/span>\n    width<\/span>:<\/span>100<\/span>%<\/span>;<\/span>\n    float<\/span>:<\/span>left<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n    padding<\/span>:<\/span> 0<\/span>;<\/span>\n    display<\/span>:<\/span>none<\/span>;<\/span>\n}<\/span>\n \n.block<\/span> ul li {<\/span>\n    background-color<\/span>:<\/span> #33CC00<\/span>;<\/span>\n    border-bottom<\/span>:<\/span> 1px<\/span> solid<\/span> #336600<\/span>;<\/span>\n    float<\/span>:<\/span> left<\/span>;<\/span>\n    list-style<\/span>:<\/span> none<\/span> outside<\/span> none<\/span>;<\/span>\n    padding<\/span>:<\/span> 5px<\/span>;<\/span>\n    width<\/span>:<\/span> 96<\/span>%<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
C\u00f3digo HTML que debes a\u00f1adir dentro del body de tu p\u00e1gina<\/h2>\n
El c\u00f3digo HTML<\/strong> que deberemos a\u00f1adir dentro del <body> ser\u00e1 algo como lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> id<\/span>=<\/span>"sidebar"<\/span> class<\/span>=<\/span>"col-xs-12 col-lg-3"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"block"<\/span>><\/span>\n        <h2<\/span><\/a>><\/span>Clientes<\/<\/span>h2<\/span><\/a>><\/span>\n        <ul<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Cliente 1<\/<\/span>li<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Cliente 2<\/<\/span>li<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Cliente 3<\/<\/span>li<\/span><\/a>><\/span>\n        <\/<\/span>ul<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>  \n    <div<\/span><\/a> class<\/span>=<\/span>"block"<\/span>><\/span>\n        <h2<\/span><\/a>><\/span>Pedidos<\/<\/span>h2<\/span><\/a>><\/span>\n        <ul<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Pedido 1<\/<\/span>li<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Pedido 2<\/<\/span>li<\/span><\/a>><\/span>\n          <li<\/span><\/a>><\/span>Pedido 3<\/<\/span>li<\/span><\/a>><\/span>\n        <\/<\/span>ul<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span> \n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En este caso espec\u00edfico hemos montado el accordion en una sidebar, por ese motivo est\u00e1 dentro de un contenedor con id=\u00bbsidebar\u00bb, por tema de maquetaci\u00f3n que veremos en el ejemplo en funcionamiento. En lo que te tienes que fijar es en el contenido de dentro. Si te fijas, tenemos dos contenedores pr\u00e1cticamente id\u00e9nticos, uno muestra clientes y el otro pedidos.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Esta entrada ha sido actualizada el 05\/07\/2018.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.<\/p>\n","protected":false},"author":1,"featured_media":7255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[67,167],"class_list":["post-5384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-accordeones","tag-eventos"],"yoast_head":"\nAccordion me con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.\" \/>\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=\"Accordion me con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/\" \/>\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-12-01T10:17:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-04T05:11:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.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\/accordeon-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/\",\"name\":\"Accordion me con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png\",\"datePublished\":\"2012-12-01T10:17:34+00:00\",\"dateModified\":\"2019-04-04T05:11:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accordion me con jQuery\"}]},{\"@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":"Accordion me con jQuery - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.","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":"Accordion me con jQuery - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-12-01T10:17:34+00:00","article_modified_time":"2019-04-04T05:11:35+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.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\/accordeon-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/","name":"Accordion me con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png","datePublished":"2012-12-01T10:17:34+00:00","dateModified":"2019-04-04T05:11:35+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite construir un men\u00fa accordion vertical muy sencillo en tu sitio Web usando la funci\u00f3n slideToggle() de jQuery.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/accordeon-me-1.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/accordeon-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Accordion me con jQuery"}]},{"@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\/5384","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=5384"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7255"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}