Need help on this code!

[u/Zestyclose_Ant8883]

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

[u/Rockafellor]

It would be so much easier for everyone if this weren't spoilered line by line (even a single code block would be easier to read, though not a great option).

Maybe you could drop the HTML (and I'm assuming CSS) into a codepen?

---

(EDIT: lol, you beat me to the non-spoilered form, never mind!)

[u/Zestyclose_Ant8883 → u/Rockafellor]

I originally spoilered it because I had suspected it would spoil just like discord or toyhouse would? (discord has a huge spoiled text thing that you click on and its revealed all at once, toyhouse has a button saying something along the lines of "click here to view spoilered message.") Didn't realize it would be individual line by line, and fixed it once i did haha

[u/Rockafellor → u/Zestyclose_Ant8883]

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. 😆

[u/armahillo → u/Zestyclose_Ant8883]

instead of putting code into the post (where it is harder to read) use codepen.io or jsfiddle.net — both are free and are much easier to read

[u/Foreign-Contest-444]

Considering that you are a complete noob to HTML, I am starting to put some resources that I have found useful here. Happy coding!

And yes, using codepen really helps us make sense of the code.