Creating an accordion got easier in HTML5.
You don’t need to use div element and javascript anymore.
You just need to use the <details> element.
The label in the accordion can be represented using <summary> element nested inside the <details> element and the data inside the accordion can then be represented using <p> (paragraph) element or other elements.
Here is an example:
<details> <summary>The Full Stack</summary> <p>HTML <p>CSS <p>Javascript <p>Java <p>MySQL </details>
Here is how it looks before expanding the accordion:

After expanding the accordion:

If you want the accordion to be expanded by default you can use the boolean attribute “open” inside the details tag.
<details open> <summary>The Full Stack</summary> <p>HTML <p>CSS <p>Javascript <p>Java <p>MySQL </details>
Now let’s apply some styling using CSS and check.
Here is the CSS :
<style> details { font: 20px Calibri; width: 750px; margin-left: 20px; } details > summary { padding: 2px 6px; width: 15em; background-color: lightblue; border: none; box-shadow: 3px 3px 4px green; cursor: pointer; transition : color 1s; } details > p { background-color: lightblue; padding: 2px 6px; margin: 2px; box-shadow: 3px 3px 4px green; } details[open] > summary { color: blue;} </style>
And here is the output :


What if you want “+” symbol instead of the default arrow symbol?
You can achieve it using CSS.
The pseudo class -webkit-details-marker contains the arrow symbol. Override it as none using the display attribute.
Then add the “+” symbol using content attribute inside “summary” element.
When the summary element opens use the content “-“.
Use the above two with the pseudo CSS element “after”
Here is a sample CSS:
<style> summary::-webkit-details-marker { display: none } summary:after { background: blue; content: "+"; float: left; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; text-align: center; width: 20px; } details[open] summary:after { content: "-"; } </style>
Here is how it looks:


What if you want the expand icon on the right?
Just change the value of the float attribute to “right” under summary:after element in the previous example:
<style> details { width: 500px; } summary::-webkit-details-marker { display: none } summary:after { background: blue; content: "+"; float: right; font-size: 1.5em; font-weight: bold; margin: -5px 10px 0 0; text-align: center; width: 20px; } details[open] summary:after { content: "-"; } </style>
I have also changed the width of the accordion above to make it smaller.
Here is how it looks:

On expanding:

That’s it!
Ref: http://html5doctor.com/the-details-and-summary-elements/