{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/accordion","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"a767bbfb-0d62-5ac5-9da4-ddea6674cc1a","title":"Accordion","slug":"/contrast/javascript/components/accordion"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Accordion\",\n \"metaTitle\": \"Accordion Component for Contrast Bootstrap\",\n \"metaDescription\": \"Building an Accordion Component using the Contrast Bootstrap Package\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Accordion\"), mdx(\"p\", null, \"Bootstrap Accordion is a component which organizes content within collapsable items. Accordion shows only one collapsed item per time.\"), mdx(\"p\", null, \"Accordions can toggle through a number of text blocks with a single click, and that greatly increases the user experience of your project.\"), mdx(\"p\", null, \"Examples of Bootstrap Accordion use case:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Data tables\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Multiple items presentation\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"FAQ page\"))), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Default Accordion example.\"), mdx(\"h6\", null, \"Script\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-Javascript\"\n }), \" [].slice\\n .call(document.querySelectorAll('[role=cdb-accordion]'))\\n .forEach(progress => {\\n new CDB.Accordion(progress);\\n });\\n\")), mdx(\"h6\", null, \"HTML\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n

Accordion 1

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet, consectetur adipisicing elit. Distinctio quia error dicta\\n molestias vel ab cum incidunt. Nam saepe, quae soluta maiores quas\\n illo nulla? Est id placeat iusto sunt?\\n
\\n
\\n
\\n

Accordion 2

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem Lorem\\n ipsum, dolor sit amet consectetur adipisicing elit. Quos rem a,\\n quo dignissimos ullam modi sunt quibusdam, aut enim sed non\\n similique vel nemo, labore doloremque quisquam expedita\\n voluptatum. Hic?\\n
\\n
\\n\\n
\\n

Accordion 3

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet consectetur adipisicing elit. Aspernatur hic dicta laboriosam\\n culpa totam quae, voluptate at doloremque, eaque porro ipsam\\n suscipit exercitationem vitae, repellendus ex distinctio autem\\n velit eos.\\n
\\n
\\n
\\n

Accordion 4

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet consectetur, adipisicing elit. Reprehenderit, rerum. Eligendi\\n est atque, ipsum error nostrum nihil? Atque voluptatum eaque\\n veniam culpa doloremque explicabo accusamus, mollitia, facilis\\n odio qui consequuntur.\\n
\\n
\\n
\\n\")), mdx(\"h2\", null, \"Accordion without Icon\"), mdx(\"h6\", null, \"Script\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-Javascript\"\n }), \" [].slice\\n .call(document.querySelectorAll('[role=cdb-accordion]'))\\n .forEach(progress => {\\n new CDB.Accordion(progress);\\n });\\n\")), mdx(\"h6\", null, \"HTML\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n
\\n

Accordion 1

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet, consectetur adipisicing elit. Distinctio quia error dicta\\n molestias vel ab cum incidunt. Nam saepe, quae soluta maiores quas\\n illo nulla? Est id placeat iusto sunt?\\n
\\n
\\n
\\n

Accordion 2

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem Lorem\\n ipsum, dolor sit amet consectetur adipisicing elit. Quos rem a,\\n quo dignissimos ullam modi sunt quibusdam, aut enim sed non\\n similique vel nemo, labore doloremque quisquam expedita\\n voluptatum. Hic?\\n
\\n
\\n\\n
\\n

Accordion 3

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet consectetur adipisicing elit. Aspernatur hic dicta laboriosam\\n culpa totam quae, voluptate at doloremque, eaque porro ipsam\\n suscipit exercitationem vitae, repellendus ex distinctio autem\\n velit eos.\\n
\\n
\\n
\\n

Accordion 4

\\n
\\n Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum\\n dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit\\n amet consectetur, adipisicing elit. Reprehenderit, rerum. Eligendi\\n est atque, ipsum error nostrum nihil? Atque voluptatum eaque\\n veniam culpa doloremque explicabo accusamus, mollitia, facilis\\n odio qui consequuntur.\\n
\\n
\\n
\\n \\n\")), mdx(\"h1\", null, \"Usage\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of the accordion component.\"), mdx(\"h2\", null, \"Contrast Accordion Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import {AccordionModule } from 'cdb';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Accordion Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible inputs of the Accordion component.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"Name\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Type\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Default\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Description\"), mdx(\"th\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"Example\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"accordionClass\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"[accordionClass]\", \"=\\\"myClass\\\"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"accordionHeaderClass\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes for the accordion header\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"[accordionHeaderClass]\", \"=\\\"myHeaderClass\\\"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"accordionBodyClass\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"String\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Adds custom classes for the accordion body\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"[accordionBodyClass]\", \"=\\\"myBodyClass\\\"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"data\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"List\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n })), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Supplies data to the accordion\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"[data]\", \"=\\\"data1\\\"\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"left\"\n }), \"hideIcon\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Boolean\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"false\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"center\"\n }), \"Hides Accordion icon\"), mdx(\"td\", _extends({\n parentName: \"tr\"\n }, {\n \"align\": \"right\"\n }), \"[hideIcon]\", \"=true\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#accordion","title":"Accordion","items":[{"url":"#examples","title":"Examples","items":[{"items":[{"items":[{"items":[{"url":"#script","title":"Script"},{"url":"#html","title":"HTML"}]}]}]}]},{"url":"#accordion-without-icon","title":"Accordion without Icon","items":[{"items":[{"items":[{"items":[{"url":"#script-1","title":"Script"},{"url":"#html-1","title":"HTML"}]}]}]}]}]},{"url":"#usage","title":"Usage","items":[{"url":"#contrast-accordion-bootstrap-modules-used","title":"Contrast Accordion Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/accordion.md"},"frontmatter":{"metaTitle":"Accordion Component for Contrast Bootstrap","metaDescription":"Building an Accordion Component using the Contrast Bootstrap Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"a767bbfb-0d62-5ac5-9da4-ddea6674cc1a"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}