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>

[pandy]

We can't help you without knowing the context, what the HTML where you want to use this looks like. Is this profile its own page or just part of a page?

[Helpless_At_Coding]

We can't help you without knowing the context, what the HTML where you want to use this looks like. Is this profile its own page or just part of a page?

It's its own page. I'm not sure what you mean by the context, though. I'm completely new to coding, and right now, if I stare at a string of code for too long, I get a headache... -_- Just not used to it yet, I guess.

Here's a character page, using the same HTML code as my page. Got permission from a the character owner, so it's fine. Heads up: It's a vore character. Didn't wanna catch anyone off guard with it. If you look at the two buttons on Mindy's character page, that's what I want to do.

https://rp.aryion.com/u/P7F1/profile/Foxy_Mindy

[pandy]

The images are inside the last DIV in the snip you posted, that has display: none in the start tag. The below is from the page you linked to.

CODE

<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>
<img src="https://i.imgur.com/608YVMm.png" width=40% height=40%><br>
<a class='autolink' href='/profile/Draws_what_you_ask'><span  style='color: #df9fcb;'>Draws_what_you_ask</span></a> is decent at art.  I am not decent at giving direction.  Also known as what a bunfox is.<br>
<br>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a9fdd21a-cc25-4e60-bea3-bdd13e066c28/ddn2x32-ab418594-a1b4-4b5a-82b4-5e0c995a54f8.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJu
OmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2Zc
L2E5ZmRkMjFhLWNjMjUtNGU2MC1iZWEzLWJkZDEzZTA2NmMyOFwvZGRuMngzMi1hYjQxODU5NC1hMWI0
LTRiNWEtODJiNC01ZTBjOTk1YTU0ZjgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93
bmxvYWQiXX0.cSF1LBYz-fyt16oxAG9Hq8LEGUXAG9SRisBSKI4bUXM"><br>
<a class='autolink' href='/profile/Deman'><span  style='color: #d67000;'>Deman</span></a> Suprised me again with a new plushy form!<br>
<br>

</div>

If I carve it out, this is the DIV we talk about.

CODE

<div style="display: none;"><br>
<img src="https://i.imgur.com/608YVMm.png" width=40% height=40%><br>
<a class='autolink' href='/profile/Draws_what_you_ask'><span  style='color: #df9fcb;'>Draws_what_you_ask</span></a> is decent at art.  I am not decent at giving direction.  Also known as what a bunfox is.<br>
<br>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a9fdd21a-cc25-4e60-bea3-bdd13e066c28/ddn2x32-ab418594-a1b4-4b5a-82b4-5e0c995a54f8.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9. eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJu
OmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2Zc
L2E5ZmRkMjFhLWNjMjUtNGU2MC1iZWEzLWJkZDEzZTA2NmMyOFwvZGRuMngzMi1hYjQxODU5NC1hMWI0
LTRiNWEtODJiNC01ZTBjOTk1YTU0ZjgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93
bmxvYWQiXX0.cSF1LBYz-fyt16oxAG9Hq8LEGUXAG9SRisBSKI4bUXM"><br>
<a class='autolink' href='/profile/Deman'><span  style='color: #d67000;'>Deman</span></a> Suprised me again with a new plushy form!<br>
<br>

</div>

The script shows and hides that DIV and everything in it. So what you need to do is to delete that BR tag and fill that DIV with the content you want there. Like so.

CODE

<div style="display: none;">
<p>
Here's a pic of my pet guinea pig Sue Ellen</p>
<img src="url/to/sueellen.jpg" width="800" height="600" alt="My guinea pig Sue Ellen">
</div>

[Helpless_At_Coding]

Holy *beep*. Thank you for your help, Pandy. Took me a minute to figure out what you were saying, and then it just clicked. Pun not intended.

[pandy]

Good. You can read more about images here.
https://htmlhelp.com/faq/html/images.html#imagestoc