Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63 Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73 Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89 Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102 Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 {"id":269,"date":"2010-07-21T14:34:08","date_gmt":"2010-07-21T12:34:08","guid":{"rendered":"https:\/\/www.pcpolis.es\/blog\/?p=269"},"modified":"2013-02-14T21:24:34","modified_gmt":"2013-02-14T19:24:34","slug":"acordeon-con-jquery-y-css","status":"publish","type":"post","link":"https:\/\/www.pcpolis.es\/blog\/css\/acordeon-con-jquery-y-css\/","title":{"rendered":"Acordeon con JQuery y CSS"},"content":{"rendered":"

Este es uno de los widgets que m\u00e1s se est\u00e1n usando por su funcionalidad y sencillez. El c\u00f3dio lo he visto en la p\u00e1gina de SohTanaka<\/a>, y me gust\u00f3 mucho la forma en que presenta el tutorial, as\u00ed que he decidido seguir sus consejos e intentar analizar el c\u00f3digo para ver c\u00f3mo funciona, adem\u00e1s de aportar algo m\u00e1s en el dise\u00f1o.<\/p>\n

Ej. 1: Acordeon con JQuery y CSS<\/h6>\n
\n

JQuery + CSS <\/span>
\nAcordeonM\u00e9todo: .toggle()<\/small><\/h1>\n

Dise\u00f1o y Mantenimiento Web<\/a><\/h2>\n
\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh.<\/p>\n

MAQUETACI\u00d3N<\/h3>\n

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.<\/p><\/div>\n<\/div>\n

Distintos leng\u00fcajes de dise\u00f1o<\/a><\/h2>\n
\n
\n

HTML, CSS, JavaScript<\/h3>\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor.<\/p>\n

Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris.<\/p>\n

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.<\/p><\/div>\n<\/div>\n

Proyectos<\/a><\/h2>\n
\n
\n

Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.<\/p>\n

Desarrollo y Mantenimiento<\/h3>\n

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.<\/p><\/div>\n<\/div>\n

P\u00e1ginas Comerciales<\/a><\/h2>\n
\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.<\/p>\n

Asesoramiento<\/h3>\n

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.<\/p><\/div>\n<\/div>\n<\/div>\n

HTML<\/h6>\n

Consiste en varios pares de bloques compuestos de T\u00edtulo y Contenido.<\/p>\n

<div class=\"acordeon\">\r\n    <!--Pares de T\u00edtulo y Contenido -->\r\n    <!--Par-1 -->\r\n    <h2 class=\"accion\"><a href=\"#\">T\u00edtulo<\/a><\/h2>\r\n    <div class=\"acordion_cont\">\r\n        <div class=\"bloque\">\r\n        \t<!--Texto e Im\u00e1genes -->\r\n        <\/div>\r\n    <\/div>\r\n<\/div><\/pre>\n
CSS<\/h6>\n
Lo m\u00e1s importante es el fondo y el padding de la etiqueta h2<\/strong>. Aqu\u00ed se ha utilizado una misma imagen para los dos estados, activo y reposo, variando la posici\u00f3n de la imagen de top para el esado en reposo y bottom para el estado activo.<\/p>\n
La clase \u00abacordion_cont<\/strong>\u00bb asignada al div que le sigue al t\u00edtulo, ser\u00e1 luego utilizada para localizar el elemento que debe mostrarse y ocultarse. Contine a su vez un div al que se le ha aplicado la clase \u00abbloque\u00bb con un padding de 20px.<\/p>\n
JQuery<\/h6>\n
\/* Acordeon *\/\r\n$(document).ready(function(){\r\n\t$(\".acordion_cont\").hide();\r\n\t$('.accion:first').addClass('active').next().slideToggle(\"slow\");\r\n\t$('.accion').click(function(){\r\n\tif( $(this).next().is(':hidden') ) {\r\n\t\t$('.accion').removeClass('active').next().slideUp();\r\n\t\t$(this).toggleClass('active').next().slideDown();\r\n\t}\r\n\treturn false;\r\n\t});\r\n});<\/pre>\n
Cuando se carga el documento<\/strong>:<\/p>\n
    \n
  1. \n
      \n
    1.  Se oculta todo el contenido con la clase que se ha pasado como localizador, en este caso: .acordion_cont<\/em><\/li>\n
    2. La pseudoclase :first<\/em> permite determinar el primero de los elementos al que se le ha aplicado la clase ‘accion’, para activarlo. Luego se localiza de manera similar el siguiente elementto del mismo tipo (div) y se le aplica el m\u00e9todo .slideToggle()<\/em>, que consiste en colapsar alternativamente su altura.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
      Cuando hacemos click<\/strong>:<\/p>\n
        \n
      1. \n
          \n
        1.  Se le aplica el m\u00e9todo .toggleClass()<\/em> al elemento pulsado. Este m\u00e9todo permite agregar o quitar la clase ‘active’ que es la que se le ha pasado como par\u00e1metro. Acto seguido se determina el siguiente elemento y se muestra mediante .slideDown().<\/li>\n
        2. Una l\u00ednea m\u00e1s se ha agregado como condicional, para completar la funcionalidad del widget y que no se nos queden abiertas las ventanas seg\u00fan las usamos. Para ello se usa el condicional \u00abif\u00bb que determina en primer lugar si presionamos el t\u00edtulo de una ventana que est\u00e9 cerrada, de otra manera no ocurrir\u00e1 nada. Si la ventana est\u00e1 cerrada, quitar\u00e1 todos los elementos que tengan la clase ‘active’ y cerrar\u00e1 el contenedor abierto. Finalmente otorga la clase ‘active’ al elemento pulsado y abre el contenedor que le corresponde, y que es el siguiente.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
          Este es uno de los widgets que m\u00e1s se est\u00e1n usando por su funcionalidad y sencillez. El c\u00f3dio lo he visto en la p\u00e1gina de SohTanaka, y me gust\u00f3 mucho la forma en que presenta el tutorial, as\u00ed que he decidido seguir sus consejos e intentar analizar el c\u00f3digo para ver c\u00f3mo funciona, adem\u00e1s de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,19],"tags":[29,30],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/269"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":4,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/269\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}