title: Create a reusable Bootstrap "collapse button" as a Java Tapestry component
body: <p>My project uses many Bootstrap "collapse" buttons to show &amp; hide content. The structure is consistent, so I believe this is a good candidate to be turned into a component. </p>
  
  <p>The structure looks like this: </p>
  
  <pre><code>&lt;button type="button" class="btn btn-toggle pull-right" data-toggle="collapse" data-target="#name_of_div_to_collapse"&gt;
  &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;div id="#name_of_div_to_collapse" class="btn_collapse"&gt; 
  Content to show and hide when the collapse button is toggled
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to turn the entire button into a re-usable component, but I can't work out how I could do so while specifying the necessary unique data-target #name_of_div_to_collapse for each instance of the button. Is this possible using Tapestry? Could I pass a parameter specifying the data-target name from the TML where I call the component? </p>
  
  <p>Update:</p>
  
  <p>I can now print the button with a unique data-target using the following code. What I can't work out is how to insert the span caret into the markup generated by the MarkupWriter.</p>
  
  <p>TML:</p>
  
  <pre><code> &lt;t:frontend.CollapseButton dataTarget="literal:#check_cases_collapse"/&gt;
  </code></pre>
  
  <p>Java:</p>
  
  <pre><code> @SupportsInformalParameters
  public class CollapseButton {
  
  @Parameter(required=true, allowNull=false, defaultPrefix=BindingConstants.ASSET)
  private String dataTarget;
  
  @Inject
  private ComponentResources resources;
  
  boolean beginRender(MarkupWriter writer)
  {
       writer.element("button", "data-target", dataTarget, "class", "btn btn-toggle pull-right", "type", "button", "data-toggle", "collapse");
       resources.renderInformalParameters(writer);
       writer.end();
       return false;
  }
  
  }
  </code></pre>
  
  <p>This generates the following output, which is almost what I want:</p>
  
  <pre><code>&lt;button data-toggle="collapse" type="button" class="btn btn-toggle pull-right" data-target="#check_cases_collapse"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>But I can't work out how to insert the span caret inside the button HTML using MarkupWriter. Anyone?</p>