{"id":15380772,"url":"https://github.com/bitstarr/grav-plugin-markdown-details","last_synced_at":"2025-10-27T00:20:00.054Z","repository":{"id":49564195,"uuid":"248319790","full_name":"bitstarr/grav-plugin-markdown-details","owner":"bitstarr","description":"Adds the ability to render collapsible sections in Markdown","archived":false,"fork":false,"pushed_at":"2021-06-14T12:55:34.000Z","size":28,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-31T20:29:37.002Z","etag":null,"topics":["grav","grav-plugin","markdown"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitstarr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-18T19:07:03.000Z","updated_at":"2022-07-04T12:02:17.000Z","dependencies_parsed_at":"2022-09-15T16:26:02.788Z","dependency_job_id":null,"html_url":"https://github.com/bitstarr/grav-plugin-markdown-details","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2Fgrav-plugin-markdown-details","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2Fgrav-plugin-markdown-details/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2Fgrav-plugin-markdown-details/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitstarr%2Fgrav-plugin-markdown-details/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitstarr","download_url":"https://codeload.github.com/bitstarr/grav-plugin-markdown-details/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239931680,"owners_count":19720564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grav","grav-plugin","markdown"],"created_at":"2024-10-01T14:24:34.655Z","updated_at":"2025-10-27T00:19:55.008Z","avatar_url":"https://github.com/bitstarr.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Markdown Details Plugin\n\nThe **markdown-details plugin** for [Grav](http://github.com/getgrav/grav) allows generation of collapsible blocks of text via markdown.\n\nThis plugin is not intended to generate accordions but rather for independent collapsable section.\n\n## Usage\n\n\u003e The HTML5 element ``\u003cdetails\u003e`` has some unexpected [accessability issues](https://daverupert.com/2019/12/why-details-is-not-an-accordion/), so there are two ways to generate markup for collapsible section. You decide which method you want to use by setting it in the [configuration](#configuration).\n\u003e You may ask why we are not using the Checkbox Hack? Well it has even more a11y implications than using ``\u003cdetails\u003e``.\n\nA collapsible section starts with the headline (trigger/summary). The content of the brackets after the delimiter ``!\u003e`` defines the tag to wrap the title in. The default tag is ``h2``.\nThen you notice your content as usual and end it with the closing delimiter ``!@``.\n\n````markdown\n!\u003e [h3] About Charles Darwin\nCharles Robert Darwin, FRS FRGS FLS FZS (/ˈdɑːrwɪn/; 12 February 1809 – 19 April 1882) was an English naturalist, geologist and biologist, best known for his contributions to the science of evolution. His proposition that all species of life have descended over time from common ancestors is now widely accepted, and considered a foundational concept in science.\n\nSee his [Wikipedia page](https://en.wikipedia.org/wiki/Charles_Darwin) for more information.\n!@\n````\n\nIf ``a11y: false`` is set in config, the markup will be based on the ``\u003cdetails\u003e`` tag:\n\n````html\n\u003cdetails class=\"details\"\u003e\n    \u003csummary class=\"details__trigger\"\u003e\n        \u003ch3 class=\"details__title\"\u003eAbout Charles Darwin\u003c/h3\u003e\n    \u003c/summary\u003e\n    \u003cdiv class=\"details__content textflow\"\u003e\n        \u003cp\u003eCharles Robert Darwin, FRS FRGS FLS FZS (/ˈdɑːrwɪn/; 12 February 1809 – 19 April 1882) was an English naturalist, geologist and biologist, best known for his contributions to the science of evolution. His proposition that all species of life have descended over time from common ancestors is now widely accepted, and considered a foundational concept in science.\u003c/p\u003e\n        \u003cp\u003eSee his \u003ca href=\"https://en.wikipedia.org/wiki/Charles_Darwin\"\u003eWikipedia page\u003c/a\u003e for more information.\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/details\u003e\n````\n\nIf ``a11y: true`` is set in config, the markup will be based on the [collapsible pattern from Inclusive Components](https://inclusive-components.design/collapsible-sections/) and adds a bit of progressively enhancing JavaScript to the page:\n\n````html\n\u003cdiv class=\"details js-collapsible\"\u003e\n    \u003ch3 class=\"details__title\" data-expanded=\"true\"\u003e\n        \u003cbutton class=\"details__trigger\" aria-expanded=\"true\"\u003e\n            About Charles Darwin\n        \u003c/button\u003e\n    \u003c/h3\u003e\n    \u003cdiv class=\"details__content textflow\"\u003e\n        \u003cp\u003eCharles Robert Darwin, FRS FRGS FLS FZS (/ˈdɑːrwɪn/; 12 February 1809 – 19 April 1882) was an English naturalist, geologist and biologist, best known for his contributions to the science of evolution. His proposition that all species of life have descended over time from common ancestors is now widely accepted, and considered a foundational concept in science.\u003c/p\u003e\n        \u003cp\u003eSee his \u003ca href=\"https://en.wikipedia.org/wiki/Charles_Darwin\"\u003eWikipedia page\u003c/a\u003e for more information.\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n````\n\n\u003e Until the JavaScript runs, all collapsible sections are expanded. In case it never runs (fails, is blocked, etc.), the user will not miss any information.\n\n## Installation\n\nInstalling the Markdown Details plugin can be done in one of three ways: The GPM (Grav Package Manager) installation method lets you quickly install the plugin with a simple terminal command, the manual method lets you do so via a zip file, and the admin method lets you do so via the Admin Plugin.\n\n### GPM Installation (Preferred)\n\nTo install the plugin via the [GPM](http://learn.getgrav.org/advanced/grav-gpm), through your system's terminal (also called the command line), navigate to the root of your Grav-installation, and enter:\n\n    bin/gpm install markdown-details\n\nThis will install the Markdown Details plugin into your `/user/plugins`-directory within Grav. Its files can be found under `/your/site/grav/user/plugins/markdown-details`.\n\n### Manual Installation\n\nTo install the plugin manually, download the zip-version of this repository and unzip it under `/your/site/grav/user/plugins`. Then rename the folder to `markdown-details`. You can find these files on [GitHub](https://github.com/bitstarr/grav-plugin-markdown-details) or via [GetGrav.org](http://getgrav.org/downloads/plugins#extras).\n\nYou should now have all the plugin files under\n\n    /your/site/grav/user/plugins/markdown-details\n\n\u003e NOTE: This plugin is a modular component for Grav which may require other plugins to operate, please see its [blueprints.yaml-file on GitHub](https://github.com/bitstarr/grav-plugin-markdown-details/blob/master/blueprints.yaml).\n\n### Admin Plugin\n\nIf you use the Admin Plugin, you can install the plugin directly by browsing the `Plugins`-menu and clicking on the `Add` button.\n\n## Configuration\n\nBefore configuring this plugin, you should copy the `user/plugins/markdown-details/markdown-details.yaml` to `user/config/plugins/markdown-details.yaml` and edit this copy.\n\nHere is the default configuration and an explanation of available options:\n\n```yaml\nenabled: true\nbuilt_in_css: true                  # include the default CSS file\nbuilt_in_js: true                   # include the default JS file\na11y: false                         # use a more accessable markup instead of details/summary, see #usage\nbase_class: details                 # CSS classes for the containing element\ntitle_class: details__title         # CSS classes for the title element (summary text)\ntrigger_class: details__trigger     # CSS classes for the trigger element (button)\ncontent_class: details__content     # CSS classes for the content container\ndefault_title_tag: h2               # Sets the default HTML tag to be used as title\n```\n\nNote that if you use the Admin Plugin, a file with your configuration named markdown-details.yaml will be saved in the `user/config/plugins/`-folder once the configuration is saved in the Admin.\n\nIf wonder about the overkill of CSS classes options: Not every frontend developer uses the BEM naming schema. At the same time there is no need to overwrite the template because of this preference if you can alter those to you linking via the configuration.\n\n## Customization\n\nSince version 2.0.0 the icons are created with CSS pseudo elements instead of a hardcoded SVG image. In order to use different aesthetics you will need to use a custom template along with custom CSS styles.\n\nCopy `user/plugins/markdown-details/templates/partials/md-details.html.twig` to your theme. There you can use the markup you prefer. If you like to create custom CSS delivered with your theme, don't forget to disbale the built in CSS option.\n\n\n## Contributing\n\nPlease set your pull request to the `develop` branch so the version number can be iterated before final merging into main branch.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitstarr%2Fgrav-plugin-markdown-details","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitstarr%2Fgrav-plugin-markdown-details","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitstarr%2Fgrav-plugin-markdown-details/lists"}