Expanded/show-hide line of text ojs3

Hi,
I’m trying to create a list of line texts (questions) in a page which if someone click on the line text (on a “+” sign or a small triangle :arrow_down_small: sign) it will be expanded to show a full explanation, something similar to the attached images.

I looked into this and found that it requires an html and css codes to do this. I think the html code is easy to deal with but how to upload the specific css file for this role.
Any ideas or suggestions are appreciated!

Using: ojs 3.3.0.8, Default Theme.

pic2

You can do that with the <details> and <summary> elements, see https://www.w3schools.com/tags/tag_details.asp

We have that in action on https://www.hope.uzh.ch/faq

Not much CSS is needed, if any. If needed, you can add CSS to the .less file in the theme you are using (in plugins/themes/{theme name}/styles/ ). See https://docs.pkp.sfu.ca/pkp-theming-guide/en/

2 Likes

Thank you. That’s awesome, this is what I was looking for.

One more question: can we put the sections titles at the top of the page and once we click on the title it directs downward to the section title with its list?

Sections titles are different question, and it would be good to have a separate forum entry for this.

You can’t do that with CSS. That would require a template change (you need to read out the sections and create anchors) and some programming. I have two solutions in place: