{"id":232494,"date":"2023-01-19T17:22:00","date_gmt":"2023-01-19T14:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232494"},"modified":"2023-02-01T10:48:28","modified_gmt":"2023-02-01T07:48:28","slug":"a-tag-de-detalhes-em-html5-e-a-implementacao-do-jquery","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/a-tag-de-detalhes-em-html5-e-a-implementacao-do-jquery\/","title":{"rendered":"A tag de detalhes em HTML5 e a implementa\u00e7\u00e3o do jQuery"},"content":{"rendered":"<p>HTML5<\/p>\n<p>De acordo com <a href=\"https:\/\/www.w3schools.com\/tags\/tag_details.asp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">W3school<\/a>, <a href=\"https:\/\/helloacm.com\/how-to-read-local-files-using-html5-filereader\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML5<\/a> adicionou uma nova tag, detalhes. Seu exemplo de uso \u00e9:<\/p>\n<pre><code>&lt;details&gt;\n\u00a0 &lt;summary&gt;Computing &amp; Technology.&lt;\/summary&gt;\n \u00a0&lt;a class=\"vglnk\" target=\"_blank\" href=\"https:\/\/helloacm.com\" rel=\"nofollow\"&gt;&lt;span&gt;https&lt;\/span&gt;&lt;span&gt;:\/\/&lt;\/span&gt;&lt;span&gt;helloacm&lt;\/span&gt;&lt;span&gt;.&lt;\/span&gt;&lt;span&gt;com&lt;\/span&gt;&lt;\/a&gt;\n&lt;\/details&gt;<\/code><\/pre>\n<p>Se o seu navegador for compat\u00edvel com <a href=\"https:\/\/helloacm.com\/html5-contenteditable-global-attribute\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML5<\/a> e com essa tag, voc\u00ea ver\u00e1 o seguinte funcionando (tag expans\u00edvel, clique para alternar mostrar e ocultar, removido porque o <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-habilitar-amp-com-wordpress-tecnicas-de-otimizacao-de-amp-com-wordpress\/\" title=\"AMP\">AMP<\/a> n\u00e3o permite essas tags <a href=\"https:\/\/helloacm.com\/how-to-read-local-files-using-html5-filereader\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML5 ):<\/a><\/p>\n<pre><code>\u25b6 Computing &amp; Technology.\n<\/code><\/pre>\n<p>Infelizmente, nem todos os navegadores suportam isso, como os navegadores <a href=\"https:\/\/helloacm.com\/separation-of-microsoft-unit-tests-to-reduce-the-load-of-ci-server\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Microsoft<\/a> IE ou Edge. Mas voc\u00ea sempre pode usar jQuery (ou javascript puro) para obter os mesmos efeitos (pelo menos 99% semelhantes).<\/p>\n<p>\u25b6 Computa\u00e7\u00e3o e Tecnologia.<\/p>\n<p>O c\u00f3digo fonte \u00e9:<\/p>\n<pre><code>jQuery(document).ready(function() {\n\u00a0 jQuery('#example_label1').click(function() {\n\u00a0 \u00a0 \u00a0jQuery('#example_d1').toggle();\n\u00a0 });\n});<\/code><\/pre>\n<p>Duas divs HTML s\u00e3o definidas: example_label1 e example_d1. O tri\u00e2ngulo <a href=\"https:\/\/helloacm.com\/providing-an-isunicodeversion-api-in-your-delphi-project\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">unicode<\/a> quadrados \u00e0 direita \u00e9 transformado para baixo, mas isso n\u00e3o \u00e9 levado em considera\u00e7\u00e3o neste simples substituto do <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/jquery-como-animar-a-rolagem-para-o-topo-e-a-rolagem-para-um-div\/\" title=\"jQuery .\">jQuery .<\/a><\/p>\n<p>Parece que voc\u00ea est\u00e1 usando um bloqueador de an\u00fancios. Mas sem receita de publicidade, n\u00e3o podemos continuar tornando este site incr\u00edvel. Entendo, desativei meu bloqueador de an\u00fancios.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A tag de detalhes em HTML5 e a implementa\u00e7\u00e3o do jQuery<\/p>\n","protected":false},"author":1,"featured_media":224460,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,722,733,846],"tags":[1170],"class_list":["post-232494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-javascript-8","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232494"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232494\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224460"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}