
Our data are rarely displayed alone without a caption or other graphic elements that make clear the meaning of their value. For example:

[source,html]
----
<label>Total amount: </label><span wicket:id="totalAmount"></span>
----

Wicket comes with a nice utility tag called _<wicket:enclosure>_ that automatically hides those decorating elements if the related data value is not visible. All we have to do is to put the involved markup inside this tag. Applying _<wicket:enclosure>_ to the previous example we get the following markup:

[source,html]
----
<wicket:enclosure> 
    <label>Total amount: </label><span wicket:id="totalAmount"></span>
</wicket:enclosure>
----

Now if component _totalAmount_ is not visible, its description (_Total amount:_) will be automatically hidden. If we have more than a Wicket component inside _<wicket:enclosure>_ we can use _child_ attribute to specify which component will control the overall visibility:

[source,html]
----
<wicket:enclosure child="totalAmount"> 
    <label>Total amount: </label><span wicket:id="totalAmount"></span><br/>
	<label>Expected delivery date: </label><span wicket:id="delivDate"></span>
</wicket:enclosure>
----

_child_ attribute supports also nested components with a colon-separated path: 

[source,html]
----
<wicket:enclosure child="totalAmountContainer:totalAmount"> 
    <div wicket:id="totalAmountContainer">
		<label>Total amount: </label><span wicket:id="totalAmount"></span>
    </div>
    <label>Expected delivery date: </label><span wicket:id="delivDate"></span>
</wicket:enclosure>
----

