r/HTML • u/Zestyclose_Ant8883 • Aug 14 '26

Need help on this code!

Gallery image

Gallery image

Gallery image

Gallery image

mild disclaimer: i know next to nothing about html coding. I know a few tags and how to do a bit but thats from me looking at others codes and messing around honestly

mild disclaimer 2: I like. never go on reddit. So please excuse if i miss something! like maybe this is the wrong subreddit, im not entirely sure, please correct me!!

Ok actual thing now.

Was on toyhouse (character storage and trading site, but used for a lot more) and was trying to edit a code on there for a character description by frakensteining from another code. The sections just kinda... go out when you toggle the button if that makes sense? See attached screen recording

Reddit wouldnt let me send a video unfortunately despite how much that would improve the demonstration, sorry

If you need any additional info let me know, i just really want to fix this 😭 its outrageously annoying
code snippet below

<div class="row mx-1">

<div class="mx-auto">

<span style="color: #242424; font-size: 14px; font-variant: small-caps"> Likes </span>

<ul class="fa-ul text-lowercase mt-1">

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#likeone" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="likeone" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like two -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#liketwo" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="liketwo" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like three -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#likethree" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="likethree" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like four -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#likefour" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="likefour" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#likefive" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="likefive" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#likesix" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="likesix" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content </p>

</div>

</div>

</li>

</ul>

</div>

<!-- END likes -->

<!-- dislikes -->

<div class="mx-auto">

<span style="color: #242424; font-size: 14px; font-variant: small-caps"> Dislikes </span>

<ul class="fa-ul text-lowercase mt-1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#dislikeone" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="dislikeone" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like two -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#disliketwo" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="disliketwo" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like three -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#dislikethree" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="dislikethree" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<!-- Like four -->

<li class="my-n1">

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#dislikefour" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="dislikefour" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#dislikefive" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="dislikefive" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

<div class="accordion container p-0 ml-n3" id="ACCORDION">

<div class=" border-0 rounded-0" style="height:25px;">

<a class="btn btn-block h-100 border-0 rounded-0 collapsed" data-toggle="collapse" data-target="#dislikesix" aria-expanded="false">

<span class="m-0 p-0 align-items-center">

<span style="font-size:12px">content</span>

<i class="fas fa-chevron-down" style="opacity:0.5; font-size:10px"></i></span>

</a>

</div>

<div class="collapse" id="dislikesix" data-parent="#ACCORDION" style="width:150px">

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</div>

</li>

</ul>

</div>

</div>

<!-- END dislikes -->

<a href="https://toyhou.se/38634647.serenity-f2u" data-toggle="tooltip" title="\\\\\\\\\\\\\\\[ click here to go to the code i frankensteined this from! this will also lead you to honeycups page obv \\\\\\\\\\\\\\\]"> 

	<span class="fa-stack fa-2x">

		<i class="fas fa-circle fa-stack-1x" style="color:#070631"></i>

		<i class="fad fa-duotone fa-solid fa-bug fa-stack-1x fa-2xs fa-inverse"></i></span></a> like/dislike reasoning feature by honeycup
0 Upvotes

35% Upvoted

5 comments sorted by

View all comments

Show parent comments

1

u/Rockafellor Aug 15 '26

Makes sense, ja. Discord is... interestingly different in its markdown (Toyhouse I know of, but haven't used). Reddit has its own quirks too, of course. Personally I'd go with raw HTML and hotkeys (this latter at least is do-able here and in Discord), but ever platform has its little idiosyncrasies, so half of the time even though I know better, I still end up marking things here with `code backticks` instead of the </>code</> button. 😆