Drop down is not working

[Mithlesh]

Hi there,

On my website page: https://www.writerrelocations.com/about-us/governance-team/, attaching the snapshot for your reference: 



I want the above one should be minimized and maximised when one click on the button(where the name is written); like in the reference below - it is minimized 



Maximised Option:



Kindly let me know how can we do the same?

[Klenkes]

How about:

https://frend.co/components/accordion/

[dragan]

refer to the BS documentation: https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example

Strictly speaking, this question should be filed under Dev Talk, rather than PW general support, since this question has nothing to do with ProcessWire, but pure frontend code.

Hints:

Even without using Bootstrap, an accordion is a very simple frontend component. Basically a click event where you toggle the active class of each li. You don't even need jQuery for that. Just make sure you're using ARIA-attributes correctly.

You are not allowed to use an id more than once per document (li id=ppacord). Why do you even use it? There's no matching CSS definition anyway.

HTML semantics and accessibility: Your headings are mixed up, i.e. after your h1 follows an h3, and then you jump to h2 again. Make sure the document structure is correct and you don't skip heading levels. This is confusing to screen reader users.