{"_id":"@aloe_vera/drop-down-func","_rev":"1-917296bf3db4bd2528e26b0b79816386","name":"@aloe_vera/drop-down-func","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@aloe_vera/drop-down-func","version":"1.0.0","description":"- hide or show element on click.","main":"nav-func.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"(https://github.com/FireDragonGod/drop-down-func.git)"},"keywords":["drop-down-func"],"author":{"name":"aloe_vera"},"license":"ISC","_id":"@aloe_vera/drop-down-func@1.0.0","gitHead":"581e93adb684c92f3112f6754973ae9699073b2d","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-YbrBimjB2SoSQNUptjeapLx2ojrjEBRwza0UmIQ9BtMOOlMVsPPn2LOvXwNGoqU6xfMGCSriHU24WiO6BAaV4Q==","shasum":"c563c4bd0888fb1873e6cad9fd25f174575745d0","tarball":"https://registry.npmjs.org/@aloe_vera/drop-down-func/-/drop-down-func-1.0.0.tgz","fileCount":4,"unpackedSize":5948,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5/BjTvnXiJY9TBz0hE57GD+lo8zEQMFiZs9pRCCjzrAiBf7CDcG4g37uEBxmhTG6tbHSR8qAAVJiJxD+4mr0xfBA=="}]},"_npmUser":{"name":"aloe_vera","email":"jomaragbisit.09163@gmail.com"},"directories":{},"maintainers":[{"name":"aloe_vera","email":"jomaragbisit.09163@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drop-down-func_1.0.0_1703831434896_0.8144425203274841"},"_hasShrinkwrap":false},"1.1.0":{"name":"@aloe_vera/drop-down-func","version":"1.1.0","description":"- hide or show element on click.","main":"nav-func.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"(https://github.com/FireDragonGod/drop-down-func.git)"},"keywords":["drop-down-func"],"author":{"name":"aloe_vera"},"license":"ISC","_id":"@aloe_vera/drop-down-func@1.1.0","gitHead":"753b0d171a6417d566a1c3761606bea9efe67bd1","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-HgfBzyY6ILs9llNyqtddQe/HW9lH+1X4rtf4znSfZ0KNwQWijfA+zu9/vhOAiLtr1Dy8C421p52nTRyislSTkg==","shasum":"60cabcf57edb2fc3a78dd295f94d899d37fd5681","tarball":"https://registry.npmjs.org/@aloe_vera/drop-down-func/-/drop-down-func-1.1.0.tgz","fileCount":3,"unpackedSize":7071,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZMmnS9LIvzn204RoaSxwVVAtEOTq18vYpcd5GREIhYAiEA6Vnhcsrq1Py7cKCKJVPT9HxjQ+2ANGkQkct1+jtPAuo="}]},"_npmUser":{"name":"aloe_vera","email":"jomaragbisit.09163@gmail.com"},"directories":{},"maintainers":[{"name":"aloe_vera","email":"jomaragbisit.09163@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drop-down-func_1.1.0_1704166656274_0.858909742234979"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-29T06:30:34.769Z","1.0.0":"2023-12-29T06:30:35.077Z","modified":"2024-01-02T03:37:36.568Z","1.1.0":"2024-01-02T03:37:36.407Z"},"maintainers":[{"name":"aloe_vera","email":"jomaragbisit.09163@gmail.com"}],"description":"- hide or show element on click.","keywords":["drop-down-func"],"repository":{"type":"git","url":"(https://github.com/FireDragonGod/drop-down-func.git)"},"author":{"name":"aloe_vera"},"license":"ISC","readme":"# drop-down-func\n\n- hide or show element on click.\n\n## how to use this?\n\nparameter => element toggler, element data attribute value, element data attribute, classList to show drop down element, active-toggler, close drop down element when this is clicked\n\n```css\n/* style menu item */\n.active-toggler {\n  background-color: black;\n  color: white;\n}\n\n/* show sub menu item */\n.visible {\n  display: block;\n}\n```\n\n```html\n<div id=\"main-container\">\n  <header>\n    <nav id=\"nav-bar\">\n      <ul class=\"nav-bar-contents\">\n        <li class=\"nav-bar-list\">\n          <div class=\"nav-bar-item\" data-nav-bar-item=\"1\">home</div>\n          <div class=\"nav-sub-item\" data-nav-sub-item=\"1\">\n            <ul class=\"nav-bar-links\">\n              <li>\n                <a class=\"nav-bar-link\" href=\"\">nav-bar-link</a>\n              </li>\n              <li>\n                <a class=\"nav-bar-link\" href=\"\">nav-bar-link</a>\n              </li>\n              <li>\n                <a class=\"nav-bar-link\" href=\"\">nav-bar-link</a>\n              </li>\n              <li>\n                <a class=\"nav-bar-link\" href=\"\">nav-bar-link</a>\n              </li>\n              <li>\n                <a class=\"nav-bar-link\" href=\"\">nav-bar-link</a>\n              </li>\n            </ul>\n          </div>\n        </li>\n      </ul>\n    </nav>\n  </header>\n</div>\n```\n\n```js\nimport dropDown from \"@aloe_vera/drop-down-func/package/nav-func\";\n\nconst navBarItem = document.querySelectorAll(\"div[data-nav-bar-item]\");\n\ndropDown({\n  // toggler\n  elementToListen: navBarItem,\n  itsDataAttribute: \"data-nav-bar-item\",\n\n  // toggle classList to\n  subElement: \"div[data-nav-sub-item\",\n  classListValue: \"visible\",\n\n  togglerClassListValue: \"active-toggler\",\n\n  // toggle toggler and it's sub element using a main container here or a cross\n  closerToggler: 'div[id=\"main-container\"]',\n}).dropDownElement();\n```\n","readmeFilename":"README.md"}