I'm sandboxing a simple text/control visibility scenario that behaves very similarly to rich:togglePanel but am having some conceptual issues in how links/buttons work - I think I just fail to understand how and when objects are added to the DOM tree, especially with the rendered attribute.

<a4j:outputPanel id="panel" layout="inline">
 <h:panelGroup rendered="#{!TestBean.showButton}">
 <a4j:commandLink value="Show Details" actionListener="#{TestBean.displayButton}" reRender="panel" immediate="true" />
 </h:panelGroup>
 <h:panelGroup rendered="#{TestBean.showButton}">
 <h:outputText value="Click to hide details. " />
 <a4j:commandButton value="Hide" actionListener="#{TestBean.resetButton}" reRender="panel" immediate="true" />
 </h:panelGroup>
</a4j:outputPanel>

The code is quite simple:
On load, the link allows the user to expand a view to show details (the commandLink).
This commandLink toggles TestBean.showButton and then rerenders the entire container.
Now the commandButton is visible, which I want to be clickable to once again toggle TestBean.showButton and essentially revert back to the page open behaviour. This isn't working right now.

Does that mean on a rerender that the commandButton isn't inserted into the DOM tree?

What is the usual way of doing something like this? My problem is that I only want to display one of those links at a time, so the usual examples where one commandLink sits outside the rerendered panel won't work for me.

Thanks for any help.
(Yes, I could just use rich:togglePanel but am trying to understand the concepts as this carries over to many different areas I'm working on)