{"id":16346921,"url":"https://github.com/simonsmith/mootools-mqshowhide","last_synced_at":"2025-11-09T02:30:23.810Z","repository":{"id":2862580,"uuid":"3867566","full_name":"simonsmith/MooTools-MqShowHide","owner":"simonsmith","description":"Simple class to aid in toggling of content based on a Media Query","archived":false,"fork":false,"pushed_at":"2012-10-07T09:39:30.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-18T08:37:31.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-03-29T15:45:07.000Z","updated_at":"2016-10-23T09:32:39.000Z","dependencies_parsed_at":"2022-08-25T15:10:44.620Z","dependency_job_id":null,"html_url":"https://github.com/simonsmith/MooTools-MqShowHide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2FMooTools-MqShowHide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2FMooTools-MqShowHide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2FMooTools-MqShowHide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2FMooTools-MqShowHide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsmith","download_url":"https://codeload.github.com/simonsmith/MooTools-MqShowHide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565664,"owners_count":19660158,"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":[],"created_at":"2024-10-11T00:38:38.143Z","updated_at":"2025-11-09T02:30:23.765Z","avatar_url":"https://github.com/simonsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MooTools MqShowHide\n\nThis simple class for [MooTools](http://mootools.net) allows a block of content to be hidden based on a [media query](http://webdesignerwall.com/tutorials/css3-media-queries) and then provide a button to show/hide the content. Useful on smaller devices when vertical space is a premium.\n\njsfiddle demo: http://jsfiddle.net/Blink/m7dXH/\n\n**HTML:**\n\n```html\n\u003cdiv class=\"container\"\u003e\n\t\u003cp\u003eSome content\u003c/p\u003e\n\t\u003cp\u003eMore content\u003c/p\u003e\n\u003c/div\u003e\n```\n\t\n**JS:**\n\n```js\nnew MqShowHide('.container', 'p').mq('(max-width: 480px)');\n```\n\t\n**Result:**\t\n\n```html\n\u003cdiv class=\"container\"\u003e\n\t\u003cdiv class=\"show-hide-container show-hide-container1\"\u003e\n\t\t\u003cp\u003eSome content\u003c/p\u003e\n\t\t\u003cp\u003eMore content\u003c/p\u003e\n\t\u003c/div\u003e\n\t\u003cbutton type=\"button\" class=\"btn-show-hide btn-show-hide1\"\u003eShow\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## Usage\n\t\n### Arguments\n- - -\n\n```js\nnew MqShowHide(container, targetElems, options);\n```\n1. **container** - _(mixed)_ String selector or an Element referencing the container\n2. **targetElems** - _(mixed)_ String selector or Element referencing the elements to be hidden\n3. **options** - _(object, optional)_ A key/value object for options\n\t\n### Options\n- - -\n\n* **trigger** - _(object)_ Options for the element that will toggle the state of the content\n\t* **type** - _(string)_ Element type _default_ `button`\n\t* **text** - _(string)_ Initial button text _default_ `Show`\n\t* **altText** - _(string)_ Text used when state of content changes _default_ `Hide`\n \t* **injectPos** - _(string)_ Where the button is injected in relation to the `container` _default_ 'bottom'\n  \t* **attr** - _(object)_ Attributes applied to the trigger element\n   \n* **wrapper** - _(object)_ Options for the element wraps the content\n\t* **type** - _(string)_ Element type _default_ `div`\n\t* **attr** - _(object)_ Attributes applied to the wrapper element\n\n### Events\n- - -\n\n* **matched** - _(function)_ Media query passed to the `mq()` method has matched\n* **notMatched** - _(function)_ Media query passed to the `mq()` method has not matched\n* **reset** - _(function)_ Elements returned to their initial state\n* **hide** - _(function)_ Elements hidden\n* **show** - _(function)_ Elements visible\n* **trigger** - _(function)_ Trigger element clicked\n\n### Methods\n- - -\n#### mq\nRuns a media query using `matchMedia` and if true, hides the content and shows the trigger element\n\n```js\nMqShowHide.mq(mediaQuery);\n```\n\n* **mediaQuery** - _(string)_ e.g. `'(max-width: 480px)'`\n                  \n#### show\nShows the elements\n\n```js\nMqShowHide.show();\n```\n\t\n#### hide\nHides the elements\n\n```js\nMqShowHide.hide();\n```\n\t\n#### reset\nResets elements to initial state\n\n\n```js\nMqShowHide.reset();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fmootools-mqshowhide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsmith%2Fmootools-mqshowhide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fmootools-mqshowhide/lists"}