Inconsistent rendering behavior when nesting tags out of order

AI-generated summary

Thomas_G reported inconsistent rendering behavior when nesting tags out of order in the hide details feature. Specifically, using <b> tags outside of [details] tags, or <div> tags to center text within the [details] tags, caused unexpected results. However, sam explained that this behavior is unsupported and provided an alternative solution using HTML code to achieve the desired outcome. This solution, which involves using <details>, <summary>, and <p> tags, worked for Thomas_G.

I was recently trying to make the hide details feature bold and I came up with this bug. Once I use <b> to make it bold and afterwards </b> inside the bracket, the title name changes. That’s a weird behavior and the best way to describe it is by reproducing it below:

<b>

[details="Example"]

</b>

Hello!

[/details]

Result:

Example

Hello!

Just found another issue. Once you align it in the center and then you use to align it back inside the bracket, the text below that command gets placed outside the details feature:

<div align=center>


[details="Hello!"]

I am in the center

</div>

Hello!

[/details]

Result:

Hello!

I am in the center

Hello!

You are incorrectly nesting things, there is no support for your desired behavior short of doing this by hand in HTML.

This works fine:


<details dir="ltr">
<summary dir="ltr"><b>Example</b></summary>
<p dir="ltr">Hello!</p>
</details>

Example

Hello!

On spot on what I was looking for. Much appreciated!