Adding Bootstrap Accordion in ReactJs App ... The Bootstrap Accordion is created by adding the Accordion component. Which further provides the ...
Home»React»ReactBootstrapAccordionwithCustomizedStyleandActivepanelStyleExample
InthisReact16+tutorial,we’lllearnHowtoimplementExpandableandCollapsablecomponentscalledAccordionsinReactJsapplicationusingReactBootstrappackage.
WhatisanAccordionComponent?
AnAccordioncomponentconsistsofvariouscontainerelementswithatitleeachcontainercanbeexpandedorcollapsedbyclickingonthetitle.Itisusedtokeepmultipledatablocksatthesameplaceonthepage.
ThistypeofstructureconsistsofaspecialqualityorfeaturebecauseofwhichitiscomparedtoamusicalinstrumentcalledAccordion,onlyonecontainercanbeopenedatonce.Ifausertriestoopenanyothercontainerthepreviouswillbeclosed.
TheReactBootstrapprovidesawidevarietyofreadytouseBootstrapUIcomponentswhichareexclusivelyconvertedandbuildforReactapplications.
Let’sgoaheadandimplementtheAccordioncomponentstepbystep
Summaryofcontent
1)
WhatisanAccordionComponent?
2)
CreateaReactApplication
3)
InstallReactBootstrapPackage
4)
AddingBootstrapAccordioninReactJsApp
5)
DefaultOpenaspecificPanelinAccordion
6)
HandleEventListeneronAccordionClick
7)
CustomizeStyleofReactBootstrapAccordion
8)
Conclusion
8.1)
RelatedPosts
CreateaReactApplication
First,we’llcreateanewReactapplicationusingnpxcreate-react-appcommand
$npxcreate-react-appreact-bootstrap-accordion-app
Moveinsidethereactapp
$cdreact-bootstrap-accordion-app
Runapplication
$npmstart
InstallReactBootstrapPackage
Aftercreatingthereactapplication,nowwe’llinstall react-bootstrapandbootstrappackagesbyrunningbelowcommand
$npminstallreact-bootstrapbootstrap
AddingBootstrapAccordioninReactJsApp
TheBootstrapAccordioniscreatedbyaddingtheAccordioncomponent.WhichfurtherprovidestheAccordion.ToggleandAccordion.Collapsecomponentsfortitleandbodyoreachpanel.
Also,importthebootstrap.min.cssfiletoaddstyle.
Bydefault,ReactBootstrapusesCardcomponenttoprovidecardlikeUItotheAccordion.
//App.js
importReactfrom'react';
import'./App.css';
import{Accordion,Card,Button}from'react-bootstrap'
import'bootstrap/dist/css/bootstrap.min.css';
functionApp(){
return(
Panel1
Bodycontentforpanel1
Panel2
Bodycontentforpanel2
);
}
exportdefaultApp;
NowrunReactappbyhitting$npmstart.Itwilllooklikethis
DefaultOpenaspecificPanelinAccordion
ToopenanAccordionpanelbydefaultwesetthedefaultActiveKeypropertyonthe.Ifyoudon’twantanyofthepanelstoopenonload,justsetittonullorsimplyremovetheproperty.
HandleEventListeneronAccordionClick
TheonClickeventhandlercanbeaddedon.
functionApp(){
functionhandleOnClick(event){
console.log('onClick',event);
};
return(
Panel1
Bodycontentforpanel1
Panel2
Bodycontentforpanel2
);
}
CustomizeStyleofReactBootstrapAccordion
NowwewillremovetheCardcomponentcompletelyandimplementourownstyleandaddedfewclasseswithprefixpanel-*.Soitwilllooklikethis
//App.js
importReact,{useState}from'react';
import'./App.css';
import{Accordion}from'react-bootstrap'
import'bootstrap/dist/css/bootstrap.min.css';
functionApp(){
const[activeId,setActiveId]=useState('0');
functiontoggleActive(id){
if(activeId===id){
setActiveId(null);
}else{
setActiveId(id);
}
}
return(
toggleActive('0')}className="panel-toggle"variant="link"eventKey="0">
Panel1
Bodycontentforpanel1
toggleActive('1')}className="panel-toggle"variant="link"eventKey="1">
Panel2
Bodycontentforpanel2
);
}
exportdefaultApp;
InthebrowserwithCardandButtoncomponents,itwillbelikethis
Let’saddourownstyletoclassaddedintheApp.css
.panel-wrap{
margin-bottom:5px;
}
.panel-wrap.active-panel.panel-header{
background:#396ea5;
}
.panel-wrap.active-panel.panel-headerbutton{
color:#ffffff;
}
.panel-header{
border:1pxsolid#cccc;
font-weight:normal;
border-radius:5px5px0px0px;
}
.panel-headerbutton{
border:none;
background:transparent;
}
.panel-headerbutton:focus{
outline:0pxauto-webkit-focus-ring-color;
}
.panel-body{
border:1pxsolid#dddddd;
background:#efefef;
color:#333333;
padding:5px;
border-top:none;
}
WehaveusedstateinsidethefunctionAppcomponentusingtheuseState()andsettingthevalueof activeIdto'0'
TheonClickeventhandlerissettingtheactiveIdtopaneliddefinedintheeventKeypropertybycallingthetoggleActivefunction
Hereweareaddingtheactive-panelclassonopenedAccordionpanel.
Conclusion
That’sitwediscussedimplementtheBootstrapAccordioncomponentintheReactJsapplication.AlsohowtocustomizethestylewithcustomclassesaddedinsteadofCardcomponent.
AlsousedonClickeventlistenerstoapplyanactivestyletopanelsbyaddingandmanagingfunctionstate.
Hopeyouenjoyedthistutorial,feelfreetoshareyourthoughts…
StaySafe!
RelatedPosts
Angular8/7+ng-bootstrap|AccordionTutorialbyExample
React17BootstrapLoadingSpinnerswithCustomizationTutorialwithExamples
React17BootstrapProgressBarExamplewithCustomizationTutorialwithExamples
React17BootstrapDatepickerExample-DynamicComponentTutorial
React17BootstrapTooltipsandPopoverswithCustomizationTutorial
React17BootstrapTabs&TabsetTutorialwithCustomLayouts
React17BootstrapTablePaginationusingreact-bootstrap-table-nextExampleTutorial
React17BootstrapResponsiveCarousel/ImageSliderExample-EventHandlingandOptionsExampleTutorial
AngularMaterial9|8AddExpansionPanelandAccordioninAngularprojectusingMaterial
React17BootstrapDropdownSelect-boxExample-HTTPResponseListinOptions
Postnavigationreportthisad
«ReactDatepickerandTimepickerComponentwithValidationusingreact-datepickerExampleApplicationReactTabsComponentinVertical,HorizontalDirectionandSlideAnimation»
Subscribe
ConnectwithD
Iallowtocreateanaccount
WhenyouloginfirsttimeusingaSocialLoginbutton,wecollectyouraccountpublicprofileinformationsharedbySocialLoginprovider,basedonyourprivacysettings.Wealsogetyouremailaddresstoautomaticallycreateanaccountforyouinourwebsite.Onceyouraccountiscreated,you'llbelogged-intothisaccount.
DisagreeAgree
Notifyof
newfollow-upcomments
newrepliestomycomments
Label
{}
[+]
Name*
Email*
ConnectwithD
Iallowtocreateanaccount
WhenyouloginfirsttimeusingaSocialLoginbutton,wecollectyouraccountpublicprofileinformationsharedbySocialLoginprovider,basedonyourprivacysettings.Wealsogetyouremailaddresstoautomaticallycreateanaccountforyouinourwebsite.Onceyouraccountiscreated,you'llbelogged-intothisaccount.
DisagreeAgree
Label
{}
[+]
Name*
Email*
1Comment
InlineFeedbacks
Viewallcomments
JoseSimancas
1yearago
Thankyou!thisinfohelpedmetocustomthecssofthecard.headersofmyaccordeon.
-1
Reply
Searchfor:
reportthisad
ADVERTISEMENT
RecentPosts
Angular13HowtoMakeRESTSearchCallusingRxJSDebounce?
Phone(Mobile)ValidationUsingReGexinReactJs–StackBlitzExample
AngularMaterial12ServerSideTablePaginationExample
Angular12MaterialDialogExample–Positions,Fullscreen,EventsTutorial
Vue–BootstrapDate&TimePickerCalenderComponentExample
CustomEmailValidationRegexPatterninReactJs
ChromeStyledColor-PickerinReactJsApplication
Ionic5RangeSliderExample–Single,MultipleMarkersonBarwithCustomStyling
reportthisad
ADVERTISEMENT
CategoriesCategories
SelectCategory
Android
Angular
AngularMaterial
AngularJS
Blogger
Datatables
Firebase
Google
GoogleAPI
GoogleMaps
Hacks
HTML5
IonicFramework
JavaScript
jQuery
ng-bootstrap
NodeJs
npm-package
Python
React
ReactBootstrap
Resolved
Sliders
SQL
TopList
Uncategorized
Vue
Windows
WordPress
YouTube
RelatedPosts
Angular8/7+ng-bootstrap|AccordionTutorialbyExample
React17BootstrapLoadingSpinnerswithCustomizationTutorialwithExamples
React17BootstrapProgressBarExamplewithCustomizationTutorialwithExamples
React17BootstrapDatepickerExample-DynamicComponentTutorial
React17BootstrapTooltipsandPopoverswithCustomizationTutorial
React17BootstrapTabs&TabsetTutorialwithCustomLayouts
React17BootstrapTablePaginationusingreact-bootstrap-table-nextExampleTutorial
React17BootstrapResponsiveCarousel/ImageSliderExample-EventHandlingandOptionsExampleTutorial
AngularMaterial9|8AddExpansionPanelandAccordioninAngularprojectusingMaterial
React17BootstrapDropdownSelect-boxExample-HTTPResponseListinOptions
reportthisad
ADVERTISEMENT
reportthisad
wpDiscuzInsert
xx
