{"id":26964417,"url":"https://github.com/nicklayb/hideablejs","last_synced_at":"2025-04-03T06:32:16.706Z","repository":{"id":57264073,"uuid":"53166401","full_name":"nicklayb/hideablejs","owner":"nicklayb","description":"Hide simply, flexibly, beautifully, gigglittely and surprisingly nicely","archived":false,"fork":false,"pushed_at":"2016-07-27T00:40:09.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T06:57:04.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nicklayb.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":"2016-03-04T21:23:39.000Z","updated_at":"2016-03-04T21:27:02.000Z","dependencies_parsed_at":"2022-08-25T02:51:57.118Z","dependency_job_id":null,"html_url":"https://github.com/nicklayb/hideablejs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fhideablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fhideablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fhideablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fhideablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicklayb","download_url":"https://codeload.github.com/nicklayb/hideablejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246948004,"owners_count":20859360,"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":"2025-04-03T06:31:22.996Z","updated_at":"2025-04-03T06:32:16.696Z","avatar_url":"https://github.com/nicklayb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hideable.js\n###### By Nicolas Boisvert :: nicklay@me.com\n\n### Hide simply, flexibly, beautifully, gigglittely and surprisingly nicely\n- **Why simply**? Because you don't do js on your own (I did all the stuff so give a virtual high five),\n- **Why flexibly**? Beacause you can modify any class/prop name easily to prevent interference with you present work.\n- **Why beautifully** ? Because it uses jQuery to do all the stuff and the magical magic behind (Go high five the jQuery team).\n- **Why gigglittely** ? Because well, you know...\n- **Why surprisingly** ? Because you'll be like \"What? But why... how...\" Eh?\n- **Why nicely** ? Because it's 1 include (assuming you use jQuery), 4 words (kind of) and the stuff is done.\n\nI would like to thank anyone who helped me doing this :\n- My cat Louise, for biting my hand and sitting on my keyboard.\n- Tidge, beacause I thought \"Hey is it cool?\" and he said \"That's cool\".\n\n## Last release\n#### Version 1.1\n\n- Added the possibility to defined closed element by default\n- Added Styles to your class element\n\n## Installation\n\n### npm\n\nJust call `npm install hideablejs` in you terminal\n\n#### Download the file from the repo\nClick download, and download\n\nLink the js file (Note that the path of the file may be different for you)\n```html\n\u003cscript type=\"text/javascript\" src=\"/js/hideable/hideable.js\"\u003e\u003c/script\u003e\n```\nNow we have two things ; A caller and a target (Of course you can use Some caller to some target also, depends on your needs)\n```html\n\u003cbutton class=\"hides\" data-hides=\"socks_box\"\u003eI am a caller\u003c/button\u003e\n\u003cdiv class=\"hideable\" data-hides=\"socks_box\"\u003e\n    This is a box containing stuff like your socks\n\u003c/divl\u003e\n```\nBy default the caller needs class ```hides``` and the target needs class ```hideable```. When you'll target a click event on the ```hides``` element, the ```hideable``` element will slide up/down depending on his states matched by the ```data-hides``` attributes\n\nIt could've been anything but I selected a button\n\nAnd its done.\n\n## Customization\nIt may be possible that ```hides```, ```hideable``` or the ```data-hides``` are already used class on your stuff. If you open the ```hideable.js``` file, you'll see an object called ```opts```.\n\n```js\nvar opts = {\n\t\tevent:'click',\n\t\tclasses:{\n\t\t\tcaller:'hides',\n\t\t\ttarget:'hideable',\n\t\t},\n\t\tprops:{\n\t\t\tcaller:'hides',\n\t\t\tstate:'hidden',\n\t\t\tslides:'slides',\n\t\t\tslideSpeed:'slideSpeed',\n\t\t\tdefault:'default',\n\t\t},\n\t\tstyles:{\n\t\t\tcaller:{\n\t\t\t\tcursor:'pointer',\n\t\t\t},\n\t\t\ttarget:{},\n\t\t},\n\t\tslides:true,\n\t\tslideSpeed: 500,\n\t\twithStyle:true,\n\t\tlog:false,\n\t}\n```\nThese properties can be modified to fit your needs heres how :\n- ```event``` : The event that will trigger the hides, could be any jquery events that you can ship to the ```.on()``` method.\n- ```classes``` : You can rename thoses classes for something else\n  * ```caller``` : Represent the classe of the element that'll trigger the event\n  * ```target``` : Guess what? It's the one who'll slides on the event\n- ```props``` : The property you can add your your targets to do special stuffs. Here you will defin the name (you can switch them if needed)\n  * ```caller``` : The property to match the caller and the target (In this case it'll be ```data-hides=\"\"```)\n  * ```state``` : The property to set the states of of the element\n  * ```slides``` : We haven't talkded about it yet, but if you set this attribute (```data-slides``` in hour case). Down there you'll see a global slide to prevent adding it to all of your element\n  * ```slideSpeed``` : Used if you use the ```slides``` property, you can enter any and different speed from a target to another.\n  * ```default``` : The default property is used to define if an element is closed by default by adding the value ```closed``` to the property, and tada! Magic!\n- ```styles``` : You can define some styles that'll be applied to the respective ```class``` values.\n  * ```caller``` : Will apply the style (Which is by default the cursor to pointer) to all of your caller class\n  * ```target``` : Will apply the style to all of your target class\n- ```slides``` : This is the global slides I was talking. Any target will act depending on this value except if you override it with the attributes in you html\n- ```slideSpeed``` : The default speed, this also prevent rewriting the speed attribute everywhere\n- ```withStyle``` : If you don't want any style to be applied, turn this off\n- ```log``` : If you wanna see what's going on, you can set this to true and everything will be console logged, well, it may reduces the performances of the so it's not recommanded in production\n\nIf you want to add stylable classes, you have to add them to you ```class``` object and your ```styles``` object. If you don't you'll broke everything and you may get mad.\n\n## Conclusion\n\nThank you for using it and feel free to contact me for any question.\n\nEnding joke :\n\u003e **Q** : Why did the programmer quit his job ? **A** : Because he didn't get arrays. (a raise)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Fhideablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicklayb%2Fhideablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Fhideablejs/lists"}