In my spfx react webpart i have total 3 tabs and each tab contain different section like first tab contains 7 sections second tab contains 8 sections and third tab contains 10 section. At the time of loading i want to show only one section on each tab and give an show more option as shown in below screen when the user clicks on show more option it has to show another section
Sample code as below:
<divclassName={styles.headerCaptionStyleT1}> Section 1
<div>abc</div>
<div>erf</div>
<div>qqq</div>
</div>
<divclassName={styles.headerCaptionStyleT1}> Section 2
<div>awerbc</div>
<div>ewerf</div>
<div>qqqwe</div>
</div>
<divclassName={styles.headerCaptionStyleT1}>Section 3
<div>df</div>
<div>ewedfrf</div>
<div>dfefd</div>
</div>
<divclassName={styles.headerCaptionStyleT1}>Section 4
<div>awdfvfderbc</div>
<div>ewfdfderf</div>
<div>fd</div>
</div>
As per above code first i need to show only contents in Section 1 if the user click 'Show more' option then the user can seee
section 1 and section 2 if the user clicks again 'Show more' options then user can see section 1 and section 2 and section 3 how we can achieve this