The problem with that code becomes more obvious if you use proper indentation:
<font size=8>Welcome back, <font style=bold>Richard!</font></font>
Friends: 90
<<link "Friends online: 1">>
<<replace "#info">>
<<link "Jackie10">>
<<replace "#info">>
[[Message him|chat1]]
<</link>> /* This doesn't match this indent. */
<</replace>> /* This doesn't match this indent. */
<</replace>>
<</link>>
@@#info;@@
What I'm saying about "proper indentation" is that if you have an element in the form "<x>...</x>" then you should indent everything inside that element one "TAB" further in, and then tab back out for the "</x>" part. This technique ensures that, if you did everything correctly, then all of the elements should have their "head" and "tail" aligned with the same indentation.
Thanks to indenting you can look at the above and easily see that you have your <</link>> and your <</replace>> lines in the wrong order, because those "tails" don't line up properly with their "heads".
As for giving you what you're looking for, it's difficult to do that when you don't write out exactly what you're looking for, even when I ask for it. I asked you to show me what you actually want the users to see, and the first time you showed me pseudo-code, and the second time you tried to describe it, instead of simply writing: "I want them to see exactly this..." and showing me exactly what it should look like.
The other problem, if I'm understanding what you're asking for now, is that it doesn't sound like good design. I tried to interpret what you were saying in terms of good design, which also made it difficult to figure out what you were asking for.
The thing is, you shouldn't make the user have to do needless extra clicks, because this is often annoying to the player. The player shouldn't have to perform multiple tasks to perform one simple action. Generally speaking, clicks should affect the outcome of the game and be as minimized as possible. For example, think of a game you've played where the option you frequently needed was buried three levels deep in the menu system.
The second problem is that keeping links around which do nothing useful can be needlessly confusing to the player. For example, if you click a link, and that link then becomes unnecessary, you should disable that link so the player doesn't waste time trying to figure out why it's still enabled. That's why I had the "Look around for other people." link turn into "People you can see around you: Frank and another person".
Also, you don't need a <<goto>> macro for anything you've described, because you can make clicking a link take you to another passage.
Now, maybe you have a good reason for doing what you've described, however you haven't communicated what you're trying to do very clearly, so it doesn't look like something you should do. That's why, "Here's what I'd like to do..." works better than "Please fix this code..." if you're trying to have another person help you.
Anyways, if I understand what you want this time, it would be this:
<font size=8>Welcome back, ''Richard!''</font>
Friends: 90
<<nobr>>
<span class="noselect">
<<link "Friends online: 2">>
<<toggleclass "#info" "hidden">>
<<toggleclass "#br1" "hidden">>
<</link>>
<span id="br1">
<br>
</span>
<span id="info" class="hidden">
<blockquote>
<<link "Jackie10">>
<<toggleclass "#jchat" "hidden">>
<<toggleclass "#br2" "hidden">>
<</link>>
<span id="jchat" class="hidden">
<blockquote>
[[Message him|chat1]]
</blockquote>
</span>
<span id="br2">
<br>
</span>
<<link "Bob1999">>
<<toggleclass "#bchat" "hidden">>
<</link>>
<span id="bchat" class="hidden">
<blockquote>
[[Message him|chat2]]
</blockquote>
</span>
</blockquote>
</span>
</span>
<</nobr>>
Which also requires this in your Stylesheet section:
.hidden {
display: none;
}
.noselect { /* Prevents things from being highlighted/selected. */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
blockquote {
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
}
That said, I'd simply do something more like this instead:
<font size=8>Welcome back, ''Richard!''</font>
Friends: 90
Friends online: 2
* Jackie10 ([[Send Message|chat1]])
* Bob1999 ([[Send Message|chat2]])
It's both far simpler to code and it only takes the user one click to do what would take 3 clicks with what I believe you're asking for.
Now, is this less realistic than the interface a real chat program would likely have? Yes, but "realism" doesn't necessarily equal "fun game play". Sometimes you have to sacrifice a bit of realism, for the sake of the user's enjoyment, by removing any unnecessary tedium. This is why games have things like "fast travel".
Anyways, that's my opinion. I hope you'll think about that at least.
Hope that helps! :-)