{"id":15295880,"url":"https://github.com/wrabit/accordion-form","last_synced_at":"2025-04-13T18:34:21.861Z","repository":{"id":40950097,"uuid":"148997582","full_name":"wrabit/accordion-form","owner":"wrabit","description":"A javascript (jQuery) plugin for building accordion forms","archived":false,"fork":false,"pushed_at":"2022-12-03T04:53:13.000Z","size":1312,"stargazers_count":16,"open_issues_count":13,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-11T19:56:28.807Z","etag":null,"topics":["bootstrap","bootstrap4","form","javascript","jquery","jquery-plugin","plugin","ui","wizard"],"latest_commit_sha":null,"homepage":"https://wrabit.github.io/accordion-form/","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/wrabit.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":"2018-09-16T13:19:02.000Z","updated_at":"2024-07-20T09:11:17.000Z","dependencies_parsed_at":"2023-01-23T04:30:09.099Z","dependency_job_id":null,"html_url":"https://github.com/wrabit/accordion-form","commit_stats":null,"previous_names":["williamabbott/accordion-wizard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wrabit%2Faccordion-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wrabit%2Faccordion-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wrabit%2Faccordion-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wrabit%2Faccordion-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wrabit","download_url":"https://codeload.github.com/wrabit/accordion-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760876,"owners_count":21157449,"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":["bootstrap","bootstrap4","form","javascript","jquery","jquery-plugin","plugin","ui","wizard"],"created_at":"2024-09-30T18:08:29.880Z","updated_at":"2025-04-13T18:34:21.841Z","avatar_url":"https://github.com/wrabit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# accordionForm.js\n\nA jQuery plugin that helps you create compact and usable accordion forms.\n\n[Usage](#usage) \\\n[Event hooks](#event-hooks) \\\n[External methods](#external-methods) \\\n[Demo](#demo)\n\n#### Why an accordion?\n\nAccordions help break down long forms to smaller chunks containing relatable questions. Autoscrolling enhances usability by scrolling the next step into view. Animation allows users to visually track where they went and where from.\n\n#### When are accordion forms no good?\n\nAccordion forms tend to be less user friendly when updating existing data, for example when using as a CRUD form. This is because users have to first navigate through steps to find their field, edit and go through all steps to save again. For this reason I included an 'edit' mode which will load the form with all steps expanded.\n\n## Usage\n\n**npm**\nnpm i accordion-form\n\n**Standard way**\n\n1. Include jQuery:\n\n\t```html\n\t\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"\u003e\u003c/script\u003e\n\t```\n\n2. Include plugin's code:\n\n\t```html\n\t\u003cscript src=\"jquery.accordion-form.min.js\"\u003e\u003c/script\u003e\n\t```\n\n3. Create markup:\n\n\t```html\n\t\u003cform id=\"element\"\u003e\n\n\t    \u003c!-- Step 1 --\u003e\n\t\t\u003cdiv data-acc-step\u003e\n\t\t\t\u003cdiv data-acc-title\u003eName \u0026amp; Email\u003c/div\u003e\n\n\t\t\t\u003clabel\u003eName:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" name=\"name\" /\u003e\n\n\t\t\t\u003clabel\u003eEmail:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" name=\"email\" /\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003c!-- Step 2 --\u003e\n\t\t\u003cdiv data-acc-step\u003e\n\t\t\t\u003cdiv data-acc-title\u003eContact\u003c/div\u003e\n\n\t\t\t\u003clabel\u003eTelephone:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" name=\"telephone\" /\u003e\n\n\t\t\t\u003clabel\u003eMobile:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" name=\"mobile\" /\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003c!-- Step 3 --\u003e\n\t\t\u003cdiv data-acc-step\u003e\n\t\t\t\u003cdiv data-acc-title\u003ePayment\u003c/div\u003e\n\n\t\t\t\u003clabel\u003eCredit card:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" name=\"card\"\u003e\n\n\t\t\t\u003clabel\u003eExpiry:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" size=\"4\" name=\"expiry\"\u003e\n\t\t\u003c/div\u003e\n\n\t\u003c/form\u003e\n\t```\n\n3. Call the plugin:\n\n\t```javascript\n\t$(\"#element\").accordionForm(options);\n\t```\n\n## Options\n\n**start** (int, default 1) \\\nThe desired starting step\n\n**mode** (string, \"accordian\" || \"edit\", default \"accordion\") \\\nEdit mode will automatically expand all steps and remove autoButtons, useful as a CRUD form editing existing data.\n\n**enableScrolling** - (bool, default true) \\\nUpon step navigation, the window will scroll to the new step.\n\n**scrollPadding** - (int, default 5) \\\nThe px value negative offset when a new step scrolls into view. Only when enableScrolling is true.\n\n**autoButtons** - (bool, default true) \\\nThe plugin will automatically add next buttons (apart from the last step where it will add a submit) and previous buttons (apart from the first step). If disabled, you can use the data attributes (```data-acc-btn-next``` and ```data-acc-btn-prev```) to assign your own buttons.\n\n**autoButtonsPrevClass** - (string, default empty) \\\nAdditional classes to add to the previous button.\n\n**autoButtonsNextClass** - (string, default empty) \\\nAdditional classes to add to the next button.\n\n**autoButtonsShowSubmit** - (bool, default true) \\\nChoose whether the plugins also creates the submit button.\n\n**autoButtonsSubmitText** - (string, default \"Submit\") \\\nThe text for the auto generated submit button.\n\n**autoButtonsEditSubmitText** - (string, default \"Save\") \\\nThe text for the auto generated submit button when in 'edit' mode.\n\n**stepNumbers** - (bool, default true) \\\nIf true the plugin will create the step numbers for you. You will need to add the ```data-acc-title``` attribute to each title element.\n\n**stepNumberClass** - (string, default empty) \\\nAny additional classes for the step number. It will add 'acc-step-number' anyway.\n\n## Event hooks\n\n**beforeNextStep** - ```function(currentStep){}``` \\\nTriggered when someone clicks 'next' button.\n\n**onSubmit** - ```function(element){}``` \\\nTriggered upon form submission.\n\n## External methods\n\n**activateNextStep** \\\n```$('#element').data('plugin_accordion_form').activateNextStep()```\n\nWould you like any more hooks, functions or configuration options? Let me know.\n\n## Demo\n\n[Demo](https://wrabit.github.io/accordion-form)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrabit%2Faccordion-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrabit%2Faccordion-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrabit%2Faccordion-form/lists"}