In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
I used <details>, <summary> & <p> tags for all three entries. 'Open' attribute on the 1st <details> tag entry as well. With the 3rd entry I used the 'open' attribute in the CSS to style the changes in the appearance with the <summary> & <p> in that entry.
https://codepen.io/weberbj/pen/JjEQOeE?editors=1100
This is my response to the challenge for day 6, found it to be enjoyable.
Day 6 Challange
https://codepen.io/kajal-28/pen/wvgVvRE
https://codepen.io/simbroo/pen/poRrLdx?editors=1000
https://codepen.io/pmmueller/pen/GRrwwpK
The HTML is simple and straightforward with the attribute open being the (open) secret.
In the CSS it is possible to substitute the icons used for open/close with the ::marker pseudoclass and e.g. Unicode.
Browsers that do not support ::marker here (like Safari) will show the default triangles instead, so all is fine.
Here is my challenge. I got hung up with the CSS so this is it for now: https://codepen.io/romola/pen/XWpBxqx?editors=1100
https://codepen.io/dbakhshi/pen/mdRqmVG
https://codepen.io/vrenee26/pen/xxgXBXe
I used <details>, <summary> & <p> tags for all three entries. 'Open' attribute on the 1st <details> tag entry as well. With the 3rd entry I used the 'open' attribute in the CSS to style the changes in the appearance with the <summary> & <p> in that entry.
Here is what I did.
https://codepen.io/brreaves/pen/RwKLJdX?editors=1100
https://codepen.io/Solobachi/pen/LYxzVbB
https://codepen.io/Solobachi/pen/LYxzVbB
https://codepen.io/jarchaff/pen/BapdebL?editors=1100
I had fun messing around with the styles and transitions in this one
https://codepen.io/kelsey-van-ert/pen/mdRMvQy?editors=1100
https://codepen.io/scloteau/pen/ZELJwyJ?editors=1100
That's just so useful! I could see this in eg WordPress widgets where you have no access to pagebuilder elements.
https://codepen.io/oldrup/pen/dyNzgdr
https://codepen.io/jinsbai/pen/mdRMQJP
https://codepen.io/kldickenson/pen/poRrKXa