├── .nvmrc ├── .npmignore ├── .npmrc ├── docs ├── _config.yml ├── icons │ └── github_icon.png ├── main.css ├── index.html └── index.js ├── .gitignore ├── .eslintignore ├── example ├── icons │ └── github_icon.png ├── styles │ ├── header.scss │ ├── index.scss │ └── section.scss ├── package.json ├── webpack.config.js ├── scripts │ └── index.ts ├── index.html └── yarn.lock ├── tsconfig.build.json ├── .prettierrc.json ├── src ├── index.ts ├── config.ts ├── utils │ └── validator.ts ├── types │ └── lib.ts └── lib │ ├── hide.ts │ ├── show.ts │ └── toggle.ts ├── CHANGELOG.md ├── jest.config.js ├── tsconfig.json ├── webpack.config.js ├── LICENSE ├── .eslintrc.json ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 18.14.0 -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | example 3 | docs -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-midnight -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | 4 | .DS_Store -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | docs 3 | node_modules 4 | 5 | webpack.config.js 6 | jest.config.js -------------------------------------------------------------------------------- /docs/icons/github_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zgrybus/slideToggle/HEAD/docs/icons/github_icon.png -------------------------------------------------------------------------------- /example/icons/github_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zgrybus/slideToggle/HEAD/example/icons/github_icon.png -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": [ 4 | "**/*.spec.ts", 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 140, 4 | "tabWidth": 2, 5 | "arrowParens": "avoid" 6 | } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { show } from './lib/show'; 2 | export { hide } from './lib/hide'; 3 | export { toggle } from './lib/toggle'; 4 | -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | export const libConfig = { 2 | tag: 'data-slide-toggle', 3 | values: { 4 | hidden: 'hidden', 5 | visible: 'shown', 6 | }, 7 | } as const; 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | 6 | ## 1.1.1 (2018-06-07) 7 | -------------------------------------------------------------------------------- /example/styles/header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | padding: 50px; 7 | 8 | .website-title { 9 | letter-spacing: 1px; 10 | font-size: 40px; 11 | } 12 | .author { 13 | margin-top: 12px; 14 | i { 15 | font-weight: 600; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/utils/validator.ts: -------------------------------------------------------------------------------- 1 | import { libConfig } from '../config'; 2 | 3 | export const validators = { 4 | isHidden: (element: HTMLElement) => element.getAttribute(libConfig.tag) === libConfig.values.hidden, 5 | isVisible: (element: HTMLElement) => element.getAttribute(libConfig.tag) === libConfig.values.visible, 6 | hasTagDefined: (element: HTMLElement) => !!element.getAttribute(libConfig.tag), 7 | }; 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleDirectories: [ 3 | "node_modules", 4 | "src" 5 | ], 6 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], 7 | roots: [ 8 | "src" 9 | ], 10 | testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(ts?)$", 11 | transform: { 12 | "^.+\\.ts?$": "ts-jest" 13 | }, 14 | moduleNameMapper: { 15 | "src/(.*)": "/src/$1" 16 | } 17 | } -------------------------------------------------------------------------------- /src/types/lib.ts: -------------------------------------------------------------------------------- 1 | export type Options = { 2 | miliseconds?: number; 3 | onAnimationEnd?: (elementRef: HTMLElement) => void; 4 | onAnimationStart?: (elementRef: HTMLElement) => void; 5 | transitionFunction?: string; 6 | elementDisplayStyle?: string; 7 | }; 8 | 9 | export type ToggleOptions = Options & { 10 | onOpen?: (elementRef: HTMLElement) => void; 11 | onClose?: (elementRef: HTMLElement) => void; 12 | }; 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "target": "ES5", 7 | "jsx": "react", 8 | "strict": true, 9 | "noImplicitAny": true, 10 | "preserveConstEnums": true, 11 | "removeComments": true, 12 | "moduleResolution": "node", 13 | "strictPropertyInitialization": false, 14 | "suppressImplicitAnyIndexErrors": true, 15 | "esModuleInterop": true, 16 | "sourceMap": true, 17 | "skipLibCheck": true, 18 | "declaration": true, 19 | "outDir": "./dist", 20 | }, 21 | "exclude": ["node_modules"], 22 | } -------------------------------------------------------------------------------- /src/lib/hide.ts: -------------------------------------------------------------------------------- 1 | import { libConfig } from '../config'; 2 | import { Options } from '../types/lib'; 3 | import { validators } from '../utils/validator'; 4 | 5 | export const hide = ( 6 | element: HTMLElement, 7 | { miliseconds = 1000, onAnimationStart, onAnimationEnd }: Omit 8 | ) => { 9 | if (validators.isHidden(element)) { 10 | return; 11 | } 12 | element.setAttribute(libConfig.tag, libConfig.values.hidden); 13 | 14 | onAnimationStart?.(element); 15 | 16 | element.style.overflow = 'hidden'; 17 | 18 | const animationRef = element.animate([{ height: `${element.offsetHeight}px` }, { height: '0px' }], { duration: miliseconds }); 19 | 20 | animationRef.addEventListener('finish', () => { 21 | element.style.overflow = ''; 22 | element.style.display = 'none'; 23 | 24 | onAnimationEnd?.(element); 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidetoggle-example", 3 | "version": "0.0.1", 4 | "description": "Example app for slidetoggle library", 5 | "scripts": { 6 | "start": "webpack serve --mode=development", 7 | "build": "webpack --mode=production" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://www.github.com/zgrybus/slidetoggle" 12 | }, 13 | "keywords": [], 14 | "author": "Krzysztof Nofz", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "css-loader": "^6.7.3", 18 | "file-loader": "^6.2.0", 19 | "html-loader": "^4.2.0", 20 | "html-webpack-plugin": "^5.5.0", 21 | "mini-css-extract-plugin": "^2.7.2", 22 | "sass": "^1.35.1", 23 | "sass-loader": "^13.2.0", 24 | "typescript": "^4.9.5", 25 | "webpack": "^5.11.1", 26 | "webpack-cli": "^5.0.1", 27 | "webpack-dev-server": "^4.11.1" 28 | }, 29 | "dependencies": { 30 | "slidetoggle": "^4.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/lib/show.ts: -------------------------------------------------------------------------------- 1 | import { libConfig } from '../config'; 2 | import { Options } from '../types/lib'; 3 | import { validators } from '../utils/validator'; 4 | 5 | export const show = ( 6 | element: HTMLElement, 7 | { miliseconds = 1000, onAnimationEnd, onAnimationStart, elementDisplayStyle = 'block' }: Options 8 | ) => { 9 | if (validators.isVisible(element)) { 10 | return; 11 | } 12 | element.setAttribute(libConfig.tag, libConfig.values.visible); 13 | 14 | onAnimationStart?.(element); 15 | 16 | element.style.height = 'auto'; 17 | element.style.overflow = 'hidden'; 18 | element.style.display = elementDisplayStyle; 19 | 20 | const animationRef = element.animate([{ height: '0px' }, { height: `${element.offsetHeight}px` }], { duration: miliseconds }); 21 | 22 | animationRef.addEventListener('finish', () => { 23 | element.style.height = ''; 24 | element.style.overflow = ''; 25 | 26 | onAnimationEnd?.(element); 27 | }); 28 | }; 29 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/index.ts', 5 | target: 'web', 6 | devtool: 'source-map', 7 | output: { 8 | path: path.resolve(__dirname, './dist'), 9 | filename: 'slidetoggle.js', 10 | library: 'slidetoggle', 11 | libraryTarget: 'umd', 12 | globalObject: 'this', 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | exclude: /\.spec.tsx?$/, 18 | include: [ 19 | path.resolve(__dirname, "src") 20 | ], 21 | test: /\.(ts|tsx)$/, 22 | loader: 'ts-loader', 23 | options: { 24 | transpileOnly: false, 25 | }, 26 | }, 27 | { 28 | enforce: 'pre', 29 | include: [ 30 | path.resolve(__dirname, "src") 31 | ], 32 | test: /\.js$/, 33 | loader: 'source-map-loader', 34 | }, 35 | ], 36 | }, 37 | resolve: { 38 | extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'], 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Krzysztof Nofz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/styles/index.scss: -------------------------------------------------------------------------------- 1 | $blue-primary: #0076c6; 2 | $blue-secondary: #2fbbf4; 3 | 4 | $grey-primary: #f7f7f7; 5 | 6 | $desktop-view: 550px; 7 | 8 | * { 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: border-box; 12 | font-family: 'Open Sans', sans-serif; 13 | } 14 | 15 | body { 16 | min-height: 100%; 17 | margin-bottom: 30px; 18 | color: $grey-primary; 19 | background: $blue-primary; 20 | } 21 | 22 | .anchor { 23 | text-decoration: none; 24 | color: $grey-primary; 25 | transition: color 0.2s ease-in; 26 | &:hover { 27 | color: $blue-secondary; 28 | } 29 | } 30 | 31 | .button { 32 | margin-top: 20px; 33 | height: 40px; 34 | width: 100px; 35 | outline: 0; 36 | border: 0; 37 | background-color: $blue-secondary; 38 | font-size: 15px; 39 | color: $grey-primary; 40 | border: 2px solid $grey-primary; 41 | cursor: pointer; 42 | transition: color 0.2s ease-in, background-color 0.2s ease-in; 43 | 44 | &:hover { 45 | color: $blue-primary; 46 | background-color: $grey-primary; 47 | } 48 | 49 | @media (min-width: $desktop-view) { 50 | width: 150px; 51 | } 52 | } 53 | 54 | @import './header.scss'; 55 | @import './section.scss'; 56 | -------------------------------------------------------------------------------- /example/styles/section.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | position: relative; 3 | width: 80%; 4 | padding: 32px 0; 5 | display: flex; 6 | align-items: center; 7 | flex-direction: column; 8 | margin: 30px auto; 9 | border-top: 2px solid $grey-primary; 10 | 11 | .toggled-element { 12 | max-width: 1000px; 13 | padding: 30px; 14 | border: 4px solid $grey-primary; 15 | text-align: justify; 16 | } 17 | 18 | .dynamic-toggling-button { 19 | margin-bottom: 32px; 20 | } 21 | 22 | .toggle-list { 23 | margin-top: 30px; 24 | display: flex; 25 | list-style: none; 26 | 27 | .toggled-list-element { 28 | width: 100px; 29 | margin-top: 4px; 30 | padding: 6px; 31 | border: 2px solid #f7f7f7; 32 | background: #2fbbf4; 33 | 34 | &.show { 35 | display: none; 36 | } 37 | 38 | @media (min-width: $desktop-view) { 39 | width: 150px; 40 | } 41 | } 42 | 43 | .toggle-item { 44 | position: relative; 45 | &.toggle-item:not(:first-of-type) { 46 | margin-left: 6px; 47 | 48 | @media (min-width: $desktop-view) { 49 | margin-left: 12px; 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint" 6 | ], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:prettier/recommended", 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended", 12 | "plugin:import/errors", 13 | "plugin:import/warnings", 14 | "plugin:import/typescript" 15 | ], 16 | "rules": { 17 | "@typescript-eslint/no-namespace": "off", 18 | "@typescript-eslint/explicit-module-boundary-types": "off", 19 | "@typescript-eslint/ban-types": "off", 20 | "import/export": "off", 21 | "import/no-unresolved": "off", 22 | "max-len": ["error", { "code": 140 }], 23 | "import/order": [ 24 | "error", 25 | { 26 | "newlines-between": "always", 27 | "groups": ["builtin", "external", "index", "internal", ["sibling", "parent"], "object"], 28 | "alphabetize": { 29 | "order": "asc", 30 | "caseInsensitive": true 31 | } 32 | } 33 | ] 34 | }, 35 | "settings": { 36 | "react": { 37 | "version": "detect" 38 | }, 39 | "import/resolver": { 40 | "node": { 41 | "extensions": [".js", ".jsx", ".ts", ".tsx"] 42 | }, 43 | "typescript": {} 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | module.exports = { 6 | entry: path.resolve(__dirname, './scripts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: path.resolve(__dirname, '../docs'), 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | exclude: /\.spec.tsx?$/, 15 | test: /\.(ts|tsx)$/, 16 | loader: 'ts-loader', 17 | options: { 18 | transpileOnly: false, 19 | }, 20 | }, 21 | { 22 | test: /\.(s(a|c)ss)$/, 23 | use: [ 24 | MiniCssExtractPlugin.loader, 25 | 'css-loader', 26 | 'sass-loader' 27 | ] 28 | }, 29 | { 30 | test: /\.(jpe?g|png|gif|svg)$/i, 31 | loader:'file-loader', 32 | options: { 33 | name: "[name].[ext]", 34 | outputPath: "icons", 35 | publicPath: "icons", 36 | } 37 | }, 38 | // { 39 | // test: /\.html$/, 40 | // loader: 'html-loader' 41 | // } 42 | ], 43 | }, 44 | resolve: { 45 | extensions: ['.js', '.ts'], 46 | }, 47 | plugins: [ 48 | new MiniCssExtractPlugin(), 49 | new HtmlWebpackPlugin({ 50 | template: './index.html', 51 | filename: 'index.html', 52 | inject: 'body', 53 | minify: false 54 | }), 55 | ], 56 | }; 57 | -------------------------------------------------------------------------------- /src/lib/toggle.ts: -------------------------------------------------------------------------------- 1 | import { hide } from './hide'; 2 | import { show } from './show'; 3 | import { ToggleOptions } from '../types/lib'; 4 | import { validators } from '../utils/validator'; 5 | 6 | export const toggle = (element: HTMLElement, options: ToggleOptions) => { 7 | if (validators.hasTagDefined(element)) { 8 | if (validators.isVisible(element)) { 9 | const { onAnimationEnd, onClose } = options; 10 | 11 | hide(element, { 12 | ...options, 13 | onAnimationEnd: elementRef => { 14 | onClose?.(elementRef); 15 | onAnimationEnd?.(elementRef); 16 | }, 17 | }); 18 | } else { 19 | const { onAnimationEnd, onOpen } = options; 20 | 21 | show(element, { 22 | ...options, 23 | onAnimationEnd: elementRef => { 24 | onOpen?.(elementRef); 25 | onAnimationEnd?.(elementRef); 26 | }, 27 | }); 28 | } 29 | } else { 30 | if (element.offsetHeight === 0) { 31 | const { onAnimationEnd, onOpen } = options; 32 | 33 | show(element, { 34 | ...options, 35 | onAnimationEnd: elementRef => { 36 | onOpen?.(elementRef); 37 | onAnimationEnd?.(elementRef); 38 | }, 39 | }); 40 | } else { 41 | const { onAnimationEnd, onClose } = options; 42 | 43 | hide(element, { 44 | ...options, 45 | onAnimationEnd: elementRef => { 46 | onClose?.(elementRef); 47 | onAnimationEnd?.(elementRef); 48 | }, 49 | }); 50 | } 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /docs/main.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}body{min-height:100%;margin-bottom:30px;color:#f7f7f7;background:#0076c6}.anchor{text-decoration:none;color:#f7f7f7;transition:color .2s ease-in}.anchor:hover{color:#2fbbf4}.button{margin-top:20px;height:40px;width:100px;outline:0;border:0;background-color:#2fbbf4;font-size:15px;color:#f7f7f7;border:2px solid #f7f7f7;cursor:pointer;transition:color .2s ease-in,background-color .2s ease-in}.button:hover{color:#0076c6;background-color:#f7f7f7}@media(min-width: 550px){.button{width:150px}}.header{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px}.header .website-title{letter-spacing:1px;font-size:40px}.header .author{margin-top:12px}.header .author i{font-weight:600}.section{position:relative;width:80%;padding:32px 0;display:flex;align-items:center;flex-direction:column;margin:30px auto;border-top:2px solid #f7f7f7}.section .toggled-element{max-width:1000px;padding:30px;border:4px solid #f7f7f7;text-align:justify}.section .dynamic-toggling-button{margin-bottom:32px}.section .toggle-list{margin-top:30px;display:flex;list-style:none}.section .toggle-list .toggled-list-element{width:100px;margin-top:4px;padding:6px;border:2px solid #f7f7f7;background:#2fbbf4}.section .toggle-list .toggled-list-element.show{display:none}@media(min-width: 550px){.section .toggle-list .toggled-list-element{width:150px}}.section .toggle-list .toggle-item{position:relative}.section .toggle-list .toggle-item.toggle-item:not(:first-of-type){margin-left:6px}@media(min-width: 550px){.section .toggle-list .toggle-item.toggle-item:not(:first-of-type){margin-left:12px}} 2 | -------------------------------------------------------------------------------- /example/scripts/index.ts: -------------------------------------------------------------------------------- 1 | import '../styles/index.scss'; 2 | 3 | import { hide, show, toggle } from 'slidetoggle'; 4 | 5 | document.querySelector('button.show')?.addEventListener('click', () => { 6 | const element = document.querySelector('[data-role="show"]') as HTMLElement; 7 | 8 | show(element, { 9 | miliseconds: 400, 10 | onAnimationStart: () => { 11 | console.log('show: START ( onAnimationStart )'); 12 | }, 13 | onAnimationEnd: () => { 14 | console.log('show: END ( onAnimationEnd )'); 15 | }, 16 | transitionFunction: 'ease-in', 17 | }); 18 | }); 19 | 20 | document.querySelector('button.hide')?.addEventListener('click', () => { 21 | const element = document.querySelector('[data-role="hide"]') as HTMLElement; 22 | 23 | hide(element, { 24 | miliseconds: 400, 25 | onAnimationStart: () => { 26 | console.log('hide: START ( onAnimationStart )'); 27 | }, 28 | onAnimationEnd: () => { 29 | console.log('hide: END ( onAnimationEnd )'); 30 | }, 31 | transitionFunction: 'ease-in', 32 | }); 33 | }); 34 | 35 | document.querySelector('button.toggle')?.addEventListener('click', () => { 36 | const element = document.querySelector('[data-role="toggle"]') as HTMLElement; 37 | 38 | toggle(element, { 39 | miliseconds: 400, 40 | onAnimationStart: () => { 41 | console.log('toggle: START ( onAnimationStart )'); 42 | }, 43 | onAnimationEnd: () => { 44 | console.log('toggle: END ( onAnimationEnd )'); 45 | }, 46 | onOpen: () => { 47 | console.log('element: VISIBLE ( onOpen )'); 48 | }, 49 | onClose: () => { 50 | console.log('element: HIDDEN ( onClose )'); 51 | }, 52 | elementDisplayStyle: 'flex', 53 | transitionFunction: 'ease-in', 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slidetoggle", 3 | "version": "4.0.0", 4 | "description": "Small library that replaces the so-loved jQuery function", 5 | "main": "dist/slidetoggle.js", 6 | "module": "dist/index.js", 7 | "typings": "dist/index.d.ts", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://www.github.com/zgrybus/slidetoggle" 11 | }, 12 | "homepage": "https://zgrybus.github.io/slideToggle", 13 | "publishConfig": { 14 | "access": "public", 15 | "registry": "https://registry.npmjs.org" 16 | }, 17 | "files": [ 18 | "dist" 19 | ], 20 | "author": "Krzysztof Nofz", 21 | "license": "MIT", 22 | "keywords": [ 23 | "Javascript", 24 | "slideToggle", 25 | "toggleSlide", 26 | "animation", 27 | "jQuery", 28 | "replace jQuery", 29 | "Typescript", 30 | "Vanilla Javascript", 31 | "JS", 32 | "Animate Functions", 33 | "requestAnimationFrame" 34 | ], 35 | "scripts": { 36 | "start": "webpack serve --mode=development", 37 | "lint": "eslint --ext .ts,.tsx ./src", 38 | "build": "tsc -p ./tsconfig.build.json && webpack --mode=production", 39 | "release": "release-it" 40 | }, 41 | "devDependencies": { 42 | "@types/jest": "29.4.0", 43 | "@typescript-eslint/eslint-plugin": "^5.51.0", 44 | "@typescript-eslint/parser": "^5.51.0", 45 | "eslint": "^8.33.0", 46 | "eslint-config-prettier": "^8.1.0", 47 | "eslint-import-resolver-typescript": "^3.5.3", 48 | "eslint-plugin-import": "^2.22.1", 49 | "eslint-plugin-prettier": "^4.2.1", 50 | "prettier": "^2.2.1", 51 | "release-it": "^15.6.0", 52 | "source-map-loader": "^4.0.1", 53 | "ts-jest": "29.0.5", 54 | "ts-loader": "^9.2.4", 55 | "typescript": "^4.9.5", 56 | "webpack": "^5.26.1", 57 | "webpack-cli": "^5.0.1", 58 | "webpack-dev-server": "^4.11.1" 59 | }, 60 | "dependencies": {} 61 | } 62 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlideToggle 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | 14 | Github 15 | SlideToggle 16 | 17 |

18 | by Krzysztof Nofz 19 |
20 |
21 |

Sample methods

22 |
    23 |
  • 24 | 25 |
    26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet auctor tempor. Duis quis odio ac magna bibendum mattis 27 | non eu tortor. 28 |
    29 |
    • 30 |
  • 31 | 32 |
    33 | Etiam elementum ipsum lacus, ac pharetra est tincidunt id. Curabitur consectetur dolor ex, eu mattis ligula tempor ut. Lorem 34 | ipsum dolor sit amet, consectetur adipiscing elit. 35 |
    36 |
    • 37 |
  • 38 | 39 |
    40 | Proin neque leo, facilisis nec fermentum ac, auctor sit amet tellus. Sed quis orci diam. Suspendisse potenti. Morbi ultricies 41 | eros uta est consectetur, eget vestibulum eros interdum. 42 |
    43 |
    • 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SlideToggle 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | 14 | Github 15 | SlideToggle 16 | 17 |

18 | by Krzysztof Nofz 19 |
20 |
21 |

Sample methods

22 |
    23 |
  • 24 | 25 |
    26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet auctor tempor. Duis quis odio ac magna bibendum mattis 27 | non eu tortor. 28 |
    29 |
    • 30 |
  • 31 | 32 |
    33 | Etiam elementum ipsum lacus, ac pharetra est tincidunt id. Curabitur consectetur dolor ex, eu mattis ligula tempor ut. Lorem 34 | ipsum dolor sit amet, consectetur adipiscing elit. 35 |
    36 |
    • 37 |
  • 38 | 39 |
    40 | Proin neque leo, facilisis nec fermentum ac, auctor sit amet tellus. Sed quis orci diam. Suspendisse potenti. Morbi ultricies 41 | eros uta est consectetur, eget vestibulum eros interdum. 42 |
    43 |
    • 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var n,t,o,e="data-slide-toggle",i="hidden",l="shown",a=function(n){return n.getAttribute(e)===l},u=function(n,t){var o=t.miliseconds,i=void 0===o?1e3:o,u=t.onAnimationEnd,r=t.onAnimationStart,c=t.elementDisplayStyle,s=void 0===c?"block":c;a(n)||(n.setAttribute(e,l),null==r||r(n),n.style.height="auto",n.style.overflow="hidden",n.style.display=s,n.animate([{height:"0px"},{height:"".concat(n.offsetHeight,"px")}],{duration:i}).addEventListener("finish",(function(){n.style.height="",n.style.overflow="",null==u||u(n)})))},r=function(n,t){var o=t.miliseconds,l=void 0===o?1e3:o,a=t.onAnimationStart,u=t.onAnimationEnd;(function(n){return n.getAttribute(e)===i})(n)||(n.setAttribute(e,i),null==a||a(n),n.style.overflow="hidden",n.animate([{height:"".concat(n.offsetHeight,"px")},{height:"0px"}],{duration:l}).addEventListener("finish",(function(){n.style.overflow="",n.style.display="none",null==u||u(n)})))},c=function(){return c=Object.assign||function(n){for(var t,o=1,e=arguments.length;o