Just enhancing my Coding skills using CSS style "onclick" hiding multiple images. Anyway, here's an example of it. Code below if you need to get it. Also, to those who love comics, here is the Savage Avenger from Marvel Comics-
alright here's the Code below -
Click the Image To see the Comics
You may click the same First image to hide it.
You may click the same First image to hide it.
<style>img { border: 1px solid #808080; padding: 2px }summary { display: inline-flex; width:480px; height:480px }details[open] img { width: 480px; height: 640px; }</style>
Add this code in your HTML editor of the Blog, either on a post or gadget (I preferred putting on your new blog post), wherever you like. More tutorials on adding HTML code will be posted soon.
After you upload the image be sure to put it in actual or Original size since you are about to resize it. It will be pixelated if you put it on low resolution.
Just before and after the "img" code, you need to add a <details> summary to hide the rest. Of course, all images must have a summary. see the example below -
<details><summary><img border="0" src="YOUR IMAGE.JPG 2 or WHATEVER picture you uploaded" /></summary><br /><summary><img border="0" src="YOUR IMAGE.JPG 1 or WHATEVER picture you uploaded" /></summary><br /><summary><img border="0" src="YOUR IMAGE.JPG 3 or WHATEVER picture you uploaded" /></summary><br /></details>
Note: Also, Sometimes Blogger will automatically add (open="") inside the details tag when you make an attempt to edit in compose view. Be sure to check and delete it, or else it won't work.
And you're done. Thank you and have a nice day.
- Jerry N. Bustillo
Comments
Post a Comment
Hey there!
Thank you so much for stopping by my weblog. I just wanted to give you a heads-up that I have made some updates to make your browsing experience even better. I fixed broken links and updated some of my posts. However, if you happen to come across any issues, please don't hesitate to let me know. I'm always here and happy to help in any way I can.
Warm regards,
Jerry Nuñez Bustillo