This is a big issue for learners new to the platform. The primary call to action on this page is to join a session, and the accordion is not even obvious. @harrisko  - I’m going to see if our tech can find a CSS solution for this and will report back here.

Major isssue for sure, the last few times I investigated this was not solvable by CSS as the content within the drop down does not exist in the DOM until you interact with it once, so needed a script to trigger open on page load which we are not allowed to do. 

Thanks for the info @Bfarkas! 
Have you seen this functionality raised as a idea? If not, I’m happy to create one

I feel like it was, but struggling to find, feel free to make one and can always be merged I suppose. 

@gstager : Would you be able to help us with a CSS code this, PLEASE!

We are in dire need of this functionality and your help would be highly appreciated.

@hsingh9 unfortunately, CSS can’t cure all, and the way the DOM of the page is architectected, the item doesn’t exist until you interact with it last I checked, you would either need to be able to run a script on the page to get around which is not allowed in Docebo, ot we need Docebo to change how the structure of the page is loaded for CSS to be able to solve.

Unfortunately this is event driven.

Basically, I need JavaScript to help me listen for the event - In this case - clicking the box.

As @Bfarkas mentioned - the code I need to modify isn’t there until after the box is clicked the first time.

Here is the code before expanding the box.

Here is the code after expanding the box.

Notice two things happen.

1. The  ‘opened’  class is applied to the parent div
2. A whole new div is added.

The div that is added is the one I need to work with but it isn’t there on page load and so cannot be addressed.