React-bootstrap modal heightReact-bootstrap OffcanvasReact-bootstrap Glyphicon

React-Bootstrap Accordion Component - GeeksforGeeks

文章推薦指數： 80 %
投票人數：10人

React-Bootstrap is a front-end framework that was designed keeping react in mind. Accordion Component provides a way to control our card ... Skiptocontent TutorialsPracticeDS&Algo.MustDoQuestionsDSATopic-wiseDSACompany-wiseAlgorithmsAnalysisofAlgorithmsAsymptoticAnalysisWorst,AverageandBestCasesAsymptoticNotationsLittleoandlittleomeganotationsLowerandUpperBoundTheoryAnalysisofLoopsSolvingRecurrencesAmortizedAnalysisWhatdoes'SpaceComplexity'mean?Pseudo-polynomialAlgorithmsPolynomialTimeApproximationSchemeATimeComplexityQuestionSearchingAlgorithmsSortingAlgorithmsGraphAlgorithmsPatternSearchingGeometricAlgorithmsMathematicalBitwiseAlgorithmsRandomizedAlgorithmsGreedyAlgorithmsDynamicProgrammingDivideandConquerBacktrackingBranchandBoundAllAlgorithmsDataStructuresArraysLinkedListStackQueueBinaryTreeBinarySearchTreeHeapHashingGraphAdvancedDataStructureMatrixStringsAllDataStructuresInterviewCornerCompanyPreparationTopTopicsPracticeCompanyQuestionsInterviewExperiencesExperiencedInterviewsInternshipInterviewsCompetititveProgrammingDesignPatternsSystemDesignTutorialMultipleChoiceQuizzesLanguagesCC++JavaPythonC#JavaScriptjQuerySQLPHPScalaPerlGoLanguageHTMLCSSKotlinCSSubjectsMathematicsOperatingSystemDBMSComputerNetworksComputerOrganizationandArchitectureTheoryofComputationCompilerDesignDigitalLogicSoftwareEngineeringGATEGATEComputerScienceNotesLastMinuteNotesGATECSSolvedPapersGATECSOriginalPapersandOfficialKeysGATE2021DatesGATECS2021SyllabusImportantTopicsforGATECSWebTechnologiesHTMLCSSJavaScriptAngularJSReactJSNodeJSBootstrapjQueryPHPSoftwareDesignsSoftwareDesignPatternsSystemDesignTutorialSchoolLearningSchoolProgrammingMathematicsNumberSystemAlgebraTrigonometryStatisticsProbabilityGeometryMensurationCalculusMathsNotes(Class8-12)Class8NotesClass9NotesClass10NotesClass11NotesClass12NotesNCERTSolutionsClass8MathsSolutionClass9MathsSolutionClass10MathsSolutionClass11MathsSolutionClass12MathsSolutionRDSharmaSolutionsClass8MathsSolutionClass9MathsSolutionClass10MathsSolutionClass11MathsSolutionClass12MathsSolutionPhysicsNotes(Class8-11)Class8NotesClass9NotesClass10NotesClass11NotesCSExams/PSUsISROISROCSOriginalPapersandOfficialKeysISROCSSolvedPapersISROCSSyllabusforScientist/EngineerExamUGCNETUGCNETCSNotesPaperIIUGCNETCSNotesPaperIIIUGCNETCSSolvedPapersStudentCampusAmbassadorProgramSchoolAmbassadorProgramProjectGeekoftheMonthCampusGeekoftheMonthPlacementCourseCompetititveProgrammingTestimonialsGeekontheTopCareersInternshipJobsApplyforJobsPostaJobJOB-A-THONEventsCourses ComewritearticlesforusandgetfeaturedLearnandcodewiththebestindustryexpertsGetaccesstoad-freecontent,doubtassistanceandmore!ComeandfindyourdreamjobwithusGeeksDigestQuizzesGeeksCampusGblogArticlesIDECampusMantriHomeSavedVideosCoursesGBlogPuzzlesWhat'sNew? ChangeLanguage HTMLCSSBootstrapJavaScriptNodeJSAngularJSjQueryPHPTypescriptJSONSVGWordpress RelatedArticles ▲RelatedArticlesHowtocalculatethenumberofdaysbetweentwodatesinjavascript?JavaScriptNumbertoString()MethodDifferencebetweenvarandletinJavaScriptFileuploadinginReact.jsHideorshowelementsinHTMLusingdisplaypropertyHowtoappendHTMLcodetoadivusingJavaScript?JavaScript|console.log()withExamplesHowdoyourunJavaScriptscriptthroughtheTerminal?HowtoOpenURLinNewTabusingJavaScript?HowtoreadalocaltextfileusingJavaScript?DifferencebetweenTypeScriptandJavaScriptCheckifanarrayisemptyornotinJavaScriptHowtoaddanobjecttoanarrayinJavaScript?FormvalidationusingHTMLandJavaScriptHowtocreateanimageelementdynamicallyusingJavaScript?HowtogetvalueofselectedradiobuttonusingJavaScript?Node.js|fs.writeFileSync()MethodConvertastringtoanintegerinJavaScriptDifferencesbetweenFunctionalComponentsandClassComponentsinReactHowtoremoveacharacterfromstringinJavaScript?HowtoconvertSettoArrayinJavaScript?HowtoforceInputfieldtoenternumbersonlyusingJavaScript?HowtocomparetwoarraysinJavaScript?SetthevalueofaninputfieldinJavaScriptHowtotriggerafiledownloadwhenclickinganHTMLbuttonorJavaScript?HowtoUsetheJavaScriptFetchAPItoGetData?HowtochangethebackgroundcolorafterclickingthebuttoninJavaScript?JavaScript|promiseresolve()MethodUploadandRetrieveImageonMongoDBusingMongooseHowtogetcurrentformatteddatedd/mm/yyyyinJavaScript?TableofContentsHowtocalculatethenumberofdaysbetweentwodatesinjavascript?JavaScriptNumbertoString()MethodDifferencebetweenvarandletinJavaScriptFileuploadinginReact.jsHideorshowelementsinHTMLusingdisplaypropertyHowtoappendHTMLcodetoadivusingJavaScript?JavaScript|console.log()withExamplesHowdoyourunJavaScriptscriptthroughtheTerminal?HowtoOpenURLinNewTabusingJavaScript?HowtoreadalocaltextfileusingJavaScript?DifferencebetweenTypeScriptandJavaScriptCheckifanarrayisemptyornotinJavaScriptHowtoaddanobjecttoanarrayinJavaScript?FormvalidationusingHTMLandJavaScriptHowtocreateanimageelementdynamicallyusingJavaScript?HowtogetvalueofselectedradiobuttonusingJavaScript?Node.js|fs.writeFileSync()MethodConvertastringtoanintegerinJavaScriptDifferencesbetweenFunctionalComponentsandClassComponentsinReactHowtoremoveacharacterfromstringinJavaScript?HowtoconvertSettoArrayinJavaScript?HowtoforceInputfieldtoenternumbersonlyusingJavaScript?HowtocomparetwoarraysinJavaScript?SetthevalueofaninputfieldinJavaScriptHowtotriggerafiledownloadwhenclickinganHTMLbuttonorJavaScript?HowtoUsetheJavaScriptFetchAPItoGetData?HowtochangethebackgroundcolorafterclickingthebuttoninJavaScript?JavaScript|promiseresolve()MethodUploadandRetrieveImageonMongoDBusingMongooseHowtogetcurrentformatteddatedd/mm/yyyyinJavaScript?ImproveArticle SaveArticle LikeArticle React-BootstrapAccordionComponentLastUpdated: 18May,2021React-Bootstrapisafront-endframeworkthatwasdesignedkeepingreactinmind.AccordionComponentprovidesawaytocontrolourcardcomponentssothatwecanopenthemoneatatime.WecanusethefollowingapproachinReactJStousethereact-bootstrapAccordionComponent.AccordionProps:activeKey:Itisthecurrentlyactivekeywhichcorrespondstotheexpandedcardwhichiscurrentlyactive.as:Itcanbeusedasacustomelementtypeforthiscomponent.defaultActiveKey:Itisthedefaultactivekeythatexpandsonstart.onSelect:ItisthecallbackfunctionnamedasSelectCallback.bsPrefix:ItisanescapehatchforworkingwithstronglycustomizedbootstrapCSS.Accordion.ToggleProps:as:Itcanbeusedasacustomelementtypeforthiscomponent.eventKey:Itisakeythatisusedtocorrespondtothecollapsecomponentwhentheclickistriggeredonthiscomponent.onClick:Itisthecallbackfunctionthatistriggeredwhenthiscomponentisclicked.Accordion.CollapseProps:children:Itisusedtopassthechildren’spropwhichshouldcontainonlyasinglechild.eventKey:Itisakeythatisusedtocorrespondtothetoggler.useAccordionToggleProps:Itisusedtocreateourcustomtogglecomponentwiththishook. eventKey:Itisthekeythatisgivenforthespecifiedelement/card.callback:Itisacallbackfunctionthatistriggeredonatoggleevent.CreatingReactApplicationAndInstallingModule:Step1:CreateaReactapplicationusingthefollowingcommand:npxcreate-react-appfoldernameStep2:Aftercreatingyourprojectfolderi.e.foldername,movetoitusingthefollowingcommand:cdfoldernameStep3:AftercreatingtheReactJSapplication,Installtherequiredmoduleusingthefollowingcommand:npminstallreact-bootstrap npminstallbootstrapProjectStructure:Itwilllooklikethefollowing.ProjectStructureExample:NowwritedownthefollowingcodeintheApp.jsfile.Here,Appisourdefaultcomponentwherewehavewrittenourcode.App.jsimportReactfrom'react';import'bootstrap/dist/css/bootstrap.css';  importAccordionfrom'react-bootstrap/Accordion';importCardfrom'react-bootstrap/Card';importButtonfrom'react-bootstrap/Button';  exportdefaultfunctionApp(){  return(          

React-BootstrapAccordionComponent

                                                  ClickMetoToggle!                                                         GreetingsfromGeeksforGeeks                                          );}SteptoRunApplication:Runtheapplicationusingthefollowingcommandfromtherootdirectoryoftheproject:npmstartOutput:Nowopenyourbrowserandgotohttp://localhost:3000/,youwillseethefollowingoutput:Reference:https://react-bootstrap.github.io/components/accordion/MyPersonalNotes arrow_drop_upSave LikePreviousTensorflow.jstf.removeBackend()FunctionNext Tensorflow.jstf.ceil()FunctionRecommendedArticlesPage:20,Jun2029,Sep2024,Oct2024,Oct2027,Oct2021,Jun2106,Jul2108,Sep2105,Jan2203,Mar2206,Jul1820,Aug1928,Nov1928,Nov1929,Sep2029,Sep2029,Sep2004,Jan2104,Jan2104,Jan2107,Jan2111,Jan2107,Jan2107,Jan21ArticleContributedBy:gouravhammad@gouravhammadVotefordifficultyEasy Normal Medium Hard ExpertArticleTags:React-BootstrapJavaScriptReactJSWebTechnologiesReportIssueWritingcodeincomment? Pleaseuseide.geeksforgeeks.org, generatelinkandsharethelinkhere. LoadCommentsWhat'sNewViewDetailsViewDetailsViewDetailsMostpopularinJavaScriptDifferencebetweenvar,letandconstkeywordsinJavaScriptJavaScriptNumber.isInteger()MethodDifferenceBetweenPUTandPATCHRequestCreateaResponsiveNavbarusingReactJSHowtochangeselectedvalueofadrop-downlistusingjQuery?MostvisitedinReactJSHowtofetchdatafromanAPIinReactJS?HowtopassdatafromchildcomponenttoitsparentinReactJS?HowtoredirecttoanotherpageinReactJS?CreateaResponsiveNavbarusingReactJSHowtopassdatafromonecomponenttoothercomponentinReactJS?× Weusecookiestoensureyouhavethebestbrowsingexperienceonourwebsite.Byusingoursite,you acknowledgethatyouhavereadandunderstoodour CookiePolicy& PrivacyPolicy GotIt! StartYourCodingJourneyNow!Login Register

請為這篇文章評分？

延伸文章資訊