Need help formatting a string of code..., Completely new to HTML, and need a... well, a lot of help. Options

[Helpless_At_Coding]

Ok, so, first, I apologize if this isn't the correct spot to put this, but, I'm on a TTRPG roleplay site (mainly D&D, but there's all sorts of RPGs being played), right? I have a profile, and you can customize your profile's character's profiles with HTML code. I'd like to put in a button to click that shows additional pictures.

Nothing fancy, or anything, I don't need the button to look like it's dragon scales, or be a rainbow of colors. I just need it to hide the pics until you click on it, then hide them again when you click on it again. I have the code, but I have no clue how in the Nine Hells, or the Infinite Abyss to format it. I know a couple things. I need to replace "Extra Pics" with whatever text I want the button itself to display, and I need to put the image embed code (which I have no idea how to get...) somewhere, but I have no idea where.

If anyone can please assist me, that would be great.

here's the code I was given for the button, and was also confirmed by several people that the code does indeed work on the site.

<style> input { color:black; } </style>

<div style="margin:20px; margin-top:5px"><div class="quotetitle"><input type="button" value="Extra pics" style="width:180px;font-size:15px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide extra pics'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Extra pics'; }" /></div><div class="quotecontent"><div style="display: none;"><br>

</div></div></div><br>