{"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\n
\n\n            \n            \n
\n\n    Bestseller Nr. 1<\/span>\n    
\n        \n            \"Einstieg\n        <\/a>\n\n            <\/div>\n\n    
\n        \n            Einstieg in HTML und CSS: Barrierefreie und...        <\/a>\n        
\n