Accordion Item #2 - React-Bootstrap

Build vertically collapsing accordions in combination with the Collapse component. Examples#. Click the accordions below to expand/collapse the accordion ... MenuGettingstartedLayoutFormsComponentsAlertsAccordionBadgeBreadcrumbButtonsButtonGroupCardsCarouselCloseButtonDropdownsFiguresImagesListGroupModalNavsNavbarOffcanvasOverlaysPaginationPlaceholderPopoversProgressSpinnersTableTabsTooltipsToastsUtilitiesMigratingAboutAccordionBuildverticallycollapsingaccordionsincombinationwiththeCollapsecomponent.Examples#Clicktheaccordionsbelowtoexpand/collapsetheaccordioncontent.BasicExample# AccordionItem#1 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#2 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#1Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.AccordionItem#2Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.CopyFullyCollapsedState#IfyouwantyourAccordiontostartinafully-collapsedstate,thensimplydon'tpassinadefaultActiveKeyproptoAccordion. AccordionItem#1 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#2 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#1Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.AccordionItem#2Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.CopyFlush#Addflushtoremovethedefaultbackground-color,someborders,andsomeroundedcornerstorenderaccordionsedge-to-edgewiththeirparentcontainer. AccordionItem#1 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#2 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#1Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.AccordionItem#2Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.CopyAlwaysopen#YoucanmakeaccordionitemsstayopenwhenanotheritemisopenedbyusingthealwaysOpenprop.Ifyou'relookingto controlthecomponent,youmustuseanarrayofstringsforactiveKeyordefaultActiveKey. AccordionItem#1 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#2 Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmod temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminim veniam,quisnostrudexercitationullamcolaborisnisiutaliquipexea commodoconsequat.Duisauteiruredolorinreprehenderitinvoluptate velitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecat cupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimid estlaborum. AccordionItem#1Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.AccordionItem#2Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.CopyCustomAccordions#Youcanstillcreatecard-basedaccordionslikethoseinBootstrap4.Youcanhook intotheAccordiontogglefunctionalityviauseAccordionButtontomakecustom togglecomponents.CustomToggle#functionCustomToggle({children,eventKey}){ constdecoratedOnClick=useAccordionButton(eventKey,()=> console.log('totallycustom!'), ); return( {children} ); } functionExample(){ return( Clickme! Hello!I'mthebody Clickme! Hello!I'manotherbody ); } render();functionCustomToggle({children,eventKey}){constdecoratedOnClick=useAccordionButton(eventKey,()=>console.log('totallycustom!'),); return({children});} functionExample(){return(Clickme!Hello!I'mthebodyClickme!Hello!I'manotherbody);} render();CopyCustomTogglewithExpansionAwareness#Youmaywishtohavedifferentstylesforthetoggleifit'sassociatedsectionisexpanded, thiscanbeachievedwithacustomtogglethatiscontextawareandalsotakesadvantageoftheuseAccordionButtonhook.functionContextAwareToggle({children,eventKey,callback}){ const{activeEventKey}=useContext(AccordionContext); constdecoratedOnClick=useAccordionButton( eventKey, ()=>callback&&callback(eventKey), ); constisCurrentEventKey=activeEventKey===eventKey; return( {children} ); } functionExample(){ return( Clickme! Hello!I'mthebody Clickme! Hello!I'manotherbody ); } render();functionContextAwareToggle({children,eventKey,callback}){const{activeEventKey}=useContext(AccordionContext); constdecoratedOnClick=useAccordionButton(eventKey,()=>callback&&callback(eventKey),); constisCurrentEventKey=activeEventKey===eventKey; return({children});} functionExample(){return(Clickme!Hello!I'mthebodyClickme!Hello!I'manotherbody);} render();CopyAPI#Accordion#viewsourcefileimportAccordionfrom'react-bootstrap/Accordion'CopyimportcodefortheAccordioncomponentNameTypeDefaultDescriptionactiveKeystring|array<>ThecurrentactivekeythatcorrespondstothecurrentlyexpandedcardalwaysOpenbooleanAllowaccordionitemstostayopenwhenanotheritemisopenedaselementTypeSetacustomelementforthiscomponentdefaultActiveKeystring|array<>ThedefaultactivekeythatisexpandedonstartflushbooleanRendersaccordionedge-to-edgewithitsparentcontainerbsPrefixstring'accordion'ChangetheunderlyingcomponentCSSbaseclassnameandmodifierclassnamesprefix.Thisisanescapehatchforworkingwithheavilycustomizedbootstrapcss.Accordion.Item#viewsourcefileimportAccordionfrom'react-bootstrap/Accordion'CopyimportcodefortheAccordioncomponentNameTypeDefaultDescriptionaselementType