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.
You can build accordion panels with these. I know at the time I said not to use these tags for accordions... but that was 4 years ago and the industry is most definitely doing it now 🤣
I knew ::marker from styling lists and found the pseudoclass in Chromes Devtools for the details/summary-triangle, so I thought "Mmh, maybe it works" - and it did.
The rest was just trial and error until it looked usable 😂
Looks fantastic! Yes, opening the panel pushes things down the page. There's no space on the page reserved for the panel when it opens (think position: relative, which would preserve space, vs. position: absolute, which does not -- or display: none which removes extra space, vs. visibility: hidden, which DOES preserve the empty space). So it will move things underneath the details panel, no matter what you do. Does that help?
🔥🎉🔥🎉🔥🎉 Looks fantastic! Nice job with the styling on the details panel. The <td> tag is used in tables, which we'll cover in days 24-26. You probably don't want to use <td> outside of a table. Great work otherwise!
Awe, thank you so much for your feedback professor Jan. I really appreciate your help. I won’t use the <td> tag then. This is so cool to learn my honest mistake while coding. :))
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.
Nice job with the red and blue details panel! You forgot to close the first panel, meaning the others are hidden inside of it when it closes (oops!). Also, you might want to make the </dive> a </div> on line 34. Other than that, this looks fantastic -- great work! 🎉🔥🎉🔥🎉🔥
Indeed, they are both block elements. However, <p> carries more meaning about a paragraph of information than a <div> does. <div> has no meaning by itself. It's used to group elements for styling purposes and/or hold a class/ID for styling. Still, great work!
Looks fantastic and the markup is great. Nicely done! I am not sure where that weird artifact is coming from either. Maybe you have some borders stacked? What happens if you move to the border-box model? Remember it's content-box by default unless you declare otherwise. See https://www.paulirish.com/2012/box-sizing-border-box-ftw/
This was a new pair of HTML tags for me, and I can see a lot of possibilities here.
https://codepen.io/idlehands1969/pen/VYvPPgq?editors=1100
You can build accordion panels with these. I know at the time I said not to use these tags for accordions... but that was 4 years ago and the industry is most definitely doing it now 🤣
https://codepen.io/weberbj/pen/JjEQOeE?editors=1100
This is my response to the challenge for day 6, found it to be enjoyable.
Great work! 🎉🎉🎉🔥🔥🔥 By the way, there is no close attribute for <details>, only open.
Day 6 Challange
https://codepen.io/kajal-28/pen/wvgVvRE
Great work! 🎉🎉🎉🔥🔥🔥 By the way, there is no close attribute for <details>, only open.
Okay Mam👍
https://codepen.io/simbroo/pen/poRrLdx?editors=1000
🔥🔥🔥🎉🎉🎉 Nicely done, great styling!
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.
Lovely job, and thanks for the ::marker tip! 🔥🎉🔥🎉🔥🎉
I didn't know that before the challenge.
I knew ::marker from styling lists and found the pseudoclass in Chromes Devtools for the details/summary-triangle, so I thought "Mmh, maybe it works" - and it did.
The rest was just trial and error until it looked usable 😂
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
Looks fantastic! Yes, opening the panel pushes things down the page. There's no space on the page reserved for the panel when it opens (think position: relative, which would preserve space, vs. position: absolute, which does not -- or display: none which removes extra space, vs. visibility: hidden, which DOES preserve the empty space). So it will move things underneath the details panel, no matter what you do. Does that help?
https://codepen.io/dbakhshi/pen/mdRqmVG
🔥🎉🔥🎉🔥🎉 Looks fantastic! Nice job with the styling on the details panel. The <td> tag is used in tables, which we'll cover in days 24-26. You probably don't want to use <td> outside of a table. Great work otherwise!
Awe, thank you so much for your feedback professor Jan. I really appreciate your help. I won’t use the <td> tag then. This is so cool to learn my honest mistake while coding. :))
You're welcome! Tables are complicated - I'll try to make them easier. 😁
Sure, will do that , thank you for your feedback professor Jan.
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.
Woo woo! 🔥🎉🔥🎉🔥🎉 Nice job with all 3 of these plus the styling. Great work and everything looks good!
Here is what I did.
https://codepen.io/brreaves/pen/RwKLJdX?editors=1100
Nice job with the red and blue details panel! You forgot to close the first panel, meaning the others are hidden inside of it when it closes (oops!). Also, you might want to make the </dive> a </div> on line 34. Other than that, this looks fantastic -- great work! 🎉🔥🎉🔥🎉🔥
https://codepen.io/Solobachi/pen/LYxzVbB
Nice job with the styling and the markup once again! 🔥🎉🔥🎉🔥🎉 Everything looks good -- your button-y <summary> seems to have inspired others 😁
https://codepen.io/Solobachi/pen/LYxzVbB
Nifty funky styling there, Solobachi! 🎉🔥🎉🔥🎉🔥 I'm curious about the <div> in details panel 3 -- why not <p>? Excellent work and thanks for sharing!
I used the <div> tag because it's the same type as <p> except that they have some semantic differences which was not necessary in my code.🤔
Indeed, they are both block elements. However, <p> carries more meaning about a paragraph of information than a <div> does. <div> has no meaning by itself. It's used to group elements for styling purposes and/or hold a class/ID for styling. Still, great work!
https://codepen.io/jarchaff/pen/BapdebL?editors=1100
I had fun messing around with the styles and transitions in this one
Ooh, pretty transitions, Jade! 🎉🔥🎉🔥🎉🔥 Code looks great. You didn't use <summary>, but there was no requirement to do so. Great work!
https://codepen.io/kelsey-van-ert/pen/mdRMvQy?editors=1100
🔥🎉🔥🎉🔥🎉 woo woo!!! Looks great!!!
https://codepen.io/scloteau/pen/ZELJwyJ?editors=1100
Well done Servane! 🔥🎉🔥🎉🔥🎉 Excellent job and pretty color choices!
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
I KNOW, RIGHT??? Great thing for WordPress and similar! I laughed at your comment on selectors -- you rock! Well done! 🎉🔥🎉🔥🎉🔥
https://codepen.io/jinsbai/pen/mdRMQJP
🔥🎉🔥🎉🔥🎉 Well done again, Jinshuo!!! Great looking details panels 👍
https://codepen.io/kldickenson/pen/poRrKXa
I was trying to get rid of the artifacts in the top corners of the detail or summary. Haven't figured that out yet.
Looks fantastic and the markup is great. Nicely done! I am not sure where that weird artifact is coming from either. Maybe you have some borders stacked? What happens if you move to the border-box model? Remember it's content-box by default unless you declare otherwise. See https://www.paulirish.com/2012/box-sizing-border-box-ftw/
🎉🎉🎉🔥🔥🔥 Love it! Well done, and awesome description list in there too 👍😁