Use CSS only accordion and support nested accordions

Problem/Motivation

In v2.0.0, the accordion implementation was done with the accordion implementation provided by the Bootstrap library.
It causes a few problem, such as styling conflict, etc. However, the biggest problem seems to be that it doesn't even support nested accordions (accordions inside accordions won't open). Which is a major bug.

Steps to reproduce

Create a multi-level accordions / accordion

[accordions]
[accordion title="level1"]
  something something
  [accordions]
    [accordion title="level2"]
     something something
      [accordions]
        [accordion title="level3"]
        something something
        [/accordion]
      [/accordions]
    [/accordion]
  [/accordions]
[/accordion]
[/accodions]

Proposed resolution

I'm now switch to a solution from https://codepen.io/peterlaxalt/pen/KEyePv (Pure Css Nested Accordion).
As public codepen are MIT licensed, I think it's ok to use some of it's code.

Remaining tasks

User interface changes

The codepen solution is using a hidden checkbox, and "label" element as the accordion title, which is kinda smart, because "label" has a "for" attribute, which means clicking on the label will change status of the "checkbox", and you can apply CSS changes based on the checkbox checked status (for accordion).
So, the HTML elements for the accordion title part does changed to input / label.
Also the layout now has the up / down arrows on the left of the text instead of right.

I also added some filters to accordion title and content so they are not just | raw filters.

API changes

Data model changes

the CSS class changed too.