<div className={'accordion'} id={'accordionNav'}>
<div className={'accordion-item'}>
<div className={'accordion-header'} id="headingOne">
<button
className={'accordion-button'}
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
We Are StackOverflow
</button>
</div>
<div
id="collapseOne"
className={'accordion-collapse collapse show'}
aria-labelledby="headingOne"
data-bs-parent="#accordionNav"
>
<div className={'accordion-body'}>
<ul>
<li>
<Link href={'/about-us'} className={'navbar-brand'}>
About us
</Link>
</li>
<li>
<Link href={'/career'} className={'navbar-brand'}>
Jobs
</Link>
</li>
<li>
<Link href={'/contact-us'} className={'navbar-brand'}>
Contact Us
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className={'accordion-item'}>
<div className={'accordion-header'} id="headingTwo">
<button
className={'accordion-button'}
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="true"
aria-controls="collapseTwo"
>
Our Programs
</button>
</div>
<div
id="collapseTwo"
className={'accordion-collapse collapse show'}
aria-labelledby="headingTwo"
data-bs-parent="#accordionNav"
>
<div className={'accordion-body'}>
<ul>
<li>
<Link
href={'/example-1'}
className={'navbar-brand'}
>
Example-1 Program
</Link>
</li>
<li>
<Link
href={'/example-2'}
className={'navbar-brand'}
>
Example-2 Program
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className={'accordion-item'}>
<div className={'accordion-header'} id="headingThree">
<button
className={'accordion-button'}
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="true"
aria-controls="collapseThree"
>
Resources
</button>
</div>
<div
id="collapseThree"
className={'accordion-collapse collapse show'}
aria-labelledby="headingThree"
data-bs-parent="#accordionNav"
>
<div className={'accordion-body'}>
<ul>
<li>
<Link href={'/blog'} className={'navbar-brand'}>
Blogs
</Link>
</li>
<li>
<Link href={'/faq'} className={'navbar-brand'}>
FAQ's
</Link>
</li>
<li>
<Link href={'/media-mention'} className={'navbar-brand'}>
Media Mentions
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className={'accordion-item'}>
<div className={'accordion-header'} id="headingFour">
<button
className={'accordion-button'}
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseFour"
aria-expanded="true"
aria-controls="collapseFour"
>
Noted Mentions
</button>
</div>
<div
id="collapseFour"
className={'accordion-collapse collapse show'}
aria-labelledby="headingFour"
data-bs-parent="#accordionNav"
>
<div className={'accordion-body'}>
<ul>
<li>
<Link
href={'/mentions'}
className={'navbar-brand'}
>
Mentions
</Link>
</li>
<li>
<Link
href={'/privacy-policy1'}
className={'navbar-brand'}
>
Privacy Policy1
</Link>
</li>
<li>
<Link
href={'/privacy-policy2'}
className={'navbar-brand'}
>
Privacy Policy2
</Link>
</li>
<li>
<Link
href={'/terms-conditions'}
className={'navbar-brand'}
>
Terms & Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
Above is my html code used. As the collapse is irresponsive in iOS devices I have set aria-expanded="true" for all the items.
I have tried using cursor: pointer on the div with class: "accordion-header", but the behaves the same. I have also tried with anchor tag () but still the same.
Below are the versions that I'm using for the Bootstrap-5
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="your-integrity-value-here" rel="preload" async ></Script>
"dependencies": { "bootstrap": "^5.3.2", },
