{"id":232445,"date":"2023-01-19T17:03:00","date_gmt":"2023-01-19T14:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232445"},"modified":"2023-02-01T10:59:30","modified_gmt":"2023-02-01T07:59:30","slug":"la-balise-de-details-dans-html5-et-limplementation-de-jquery","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/la-balise-de-details-dans-html5-et-limplementation-de-jquery\/","title":{"rendered":"La balise de d\u00e9tails dans HTML5 et l&rsquo;impl\u00e9mentation de jQuery"},"content":{"rendered":"<p>HTML5<\/p>\n<p>Selon <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> a ajout\u00e9 une nouvelle balise, details. Son exemple d&rsquo;utilisation est\u00a0:<\/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>Si votre navigateur prend en charge <a href=\"https:\/\/helloacm.com\/html5-contenteditable-global-attribute\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML5<\/a> et prend en charge cette balise, vous verrez le fonctionnement suivant (balise extensible, cliquez pour basculer entre afficher et masquer, supprim\u00e9e car <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/comment-activer-amp-avec-wordpress-techniques-doptimisation-amp-avec-wordpress\/\" title=\"AMP\">AMP<\/a> n&rsquo;autorise pas ces balises <a href=\"https:\/\/helloacm.com\/how-to-read-local-files-using-html5-filereader\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTML5<\/a> )\u00a0:<\/p>\n<pre><code>\u25b6 Computing &amp; Technology.\n<\/code><\/pre>\n<p>Malheureusement, tous les navigateurs ne le prennent pas en charge, comme les navigateurs <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. Mais vous pouvez toujours utiliser jQuery (ou javascript pur) pour obtenir les m\u00eames effets (au moins 99\u00a0% similaires).<\/p>\n<p>\u25b6 Informatique et technologie.<\/p>\n<p>Le code source est\u00a0:<\/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>Deux divs HTML sont d\u00e9finis\u00a0: example_label1 et example_d1. Les carr\u00e9s du triangle <a href=\"https:\/\/helloacm.com\/providing-an-isunicodeversion-api-in-your-delphi-project\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">unicode<\/a> \u00e0 droite sont transform\u00e9s en bas mais cela n&rsquo;est pas pris en compte dans ce simple substitut <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/jquery-comment-animer-le-defilement-vers-le-haut-et-le-defilement-vers-une-div\/\" title=\"jQuery .\">jQuery .<\/a><\/p>\n<p>Il semble que vous utilisiez un bloqueur de publicit\u00e9s.Mais sans revenus publicitaires, nous ne pouvons pas continuer \u00e0 rendre ce site g\u00e9nial.Je comprends, j&rsquo;ai d\u00e9sactiv\u00e9 mon bloqueur de publicit\u00e9s.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La balise de d\u00e9tails dans HTML5 et l&rsquo;impl\u00e9mentation de 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":[893,717,728,841],"tags":[1167],"class_list":["post-232445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-javascript-3","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232445"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224460"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}