‘Details’ html tag is a very easy way to collapse\/expand a web content: you can see it in the following example. This is the code:<\/p>\n\n\n\n
<details>\n<summary>expansible title<\/summary>\n<p>all the content you want: text, images, video, in a nutshell: all possible content<\/p>\n<\/details><\/code><\/pre>\n\n\n\nand this is the result:<\/p>\n\n\n\n\nexpansible title<\/summary>\nall the content you want: text, images, video, in a nutshell: all possible content<\/p>\n<\/details>\n\n\n\n
But there is a problem: the collapsed content is not reachable unless you click over his ‘summary’ (in the example above: ‘expansible title’) . Therefore a link from outside<\/em> the details content toward some element inside<\/em> that, doesn’t work, because it cannot open it.<\/p>\n\n\n\nTo fix this problem you can use a little javascript:<\/p>\n\n\n\n
const openDetailsIfAnchorHidden = evt => {\n const targetDIV = document.querySelector(evt.target.getAttribute(\"href\"));\n if ( !! targetDIV.offsetHeight || targetDIV.getClientRects().length ) return;\n targetDIV.closest(\"details\").open = true;\n }\n\n [...document.querySelectorAll(\"[href^='#']\")].forEach( \n el => el.addEventListener(\"click\", openDetailsIfAnchorHidden )\n );<\/code><\/pre>\n\n\n\nto be put at the bottom<\/em> of a page (otherwise it doesn’t work).<\/p>\n","protected":false},"excerpt":{"rendered":"‘Details’ html tag is a very easy way to collapse\/expand a web content: you can see it in the following example. This is the code: and this is the result: expansible title all the content you want: text, images, video, in a nutshell: all possible content But there is a problem: the collapsed content is … <\/p>\n