{"id":1572,"date":"2021-04-10T14:21:02","date_gmt":"2021-04-10T12:21:02","guid":{"rendered":"https:\/\/ekiwi.de\/?p=1572"},"modified":"2021-04-12T20:48:21","modified_gmt":"2021-04-12T18:48:21","slug":"html-ausklappelemente-mit-dem-details-tag","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/1572\/html-ausklappelemente-mit-dem-details-tag\/","title":{"rendered":"HTML: Ausklappelemente mit dem Details-Tag"},"content":{"rendered":"

Der Details-Tag erlaubt schnell und einfach Ausklappelemente in Webseiten zu erstellen.<\/p>\n

<\/p>\n

Ausklappelemente f\u00fcr Detailinformationen lassen sich in HTML schnell und einfach mit dem „detail“ Tag erstellen. Klickt der Anwender auf das Element, wird es aufgeklappt und der Inhalt wird sichtbar.<\/p>\n

\"\"<\/p>\n

M\u00f6glich und einfach umsetzbar macht dies der folgende Code:<\/p>\n

\r\n<details style="background: #cccccc; border: 1px solid #000; margin-bottom: 1.5rem;">\r\n    <summary style="padding: 1rem; background: #222222; color: #fff; cursor: pointer;">\r\n        Ich bin die \u00dcberschrift. Klick mich an!\r\n    <\/summary>\r\n    <div style="padding: 1rem 1rem 1px 1rem;">\r\n        <p>Hier kommt Inhalt, der erst nach dem Ausklappen sichtbar ist.<\/p>\r\n        <img src="https:\/\/ekiwi.de\/wp-content\/uploads\/2018\/03\/logo_blog_header-2.png\">\r\n    <\/div>\r\n<\/details><\/pre>\n
Der Code ist fast selbsterkl\u00e4rend. Das Element wird vom „detail“-Tag umschlossen. Die „summary“ enth\u00e4lt die \u00dcberschrift und das „div“-Element enth\u00e4lt den Inhalt, welcher nach dem Aufklappen sichtbar ist.<\/p>\n
Hier geht es zum Beispiel<\/a><\/p>\n
Keine Produkte gefunden.<\/p>","protected":false},"excerpt":{"rendered":"
Der Details-Tag erlaubt schnell und einfach Ausklappelemente in Webseiten zu erstellen.<\/p>\n","protected":false},"author":1,"featured_media":1344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[72,4,172],"class_list":["post-1572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-anleitung","tag-html","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=1572"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/1572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/1344"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=1572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=1572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=1572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}