Jump to content

Drop down is not working


Mithlesh
 Share

Recommended Posts

Hi there,

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

image.thumb.png.20d3103cacde29953548656bb5ac0eb8.png

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 

image.thumb.png.e52e7a95bf5b0619910981b6c3654154.png

Maximised Option:

1970902460_Screenshot(195).thumb.png.0d0eb8712d4d31dde660b7b12e5cf88a.png

Kindly let me know how can we do the same?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...