Mithlesh Posted September 29, 2019 Share Posted September 29, 2019 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? Link to comment Share on other sites More sharing options...
Klenkes Posted September 29, 2019 Share Posted September 29, 2019 How about: https://frend.co/components/accordion/ Link to comment Share on other sites More sharing options...
dragan Posted September 29, 2019 Share Posted September 29, 2019 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now