<?xml version="1.0" encoding="UTF-8"?>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
        
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:tr="http://myfaces.apache.org/trinidad">

    The showDetail provides a means of toggling a group of components between being disclosed or undisclosed. A showDetail should be used to:

    <h3>1. Hide/show an entire section or a part of a section of information within the
        contents of a page such as: </h3>

    <tr:panelList >
        <tr:outputText value="show more information / hide more information"/>
        <tr:outputText value="show details / hide details"/>
        <tr:outputText value="show &quot;section name&quot; / hide &quot;section name&quot;"/>
        <tr:outputText value="show graph/hide graph, etc."/>
    </tr:panelList>

    <h3>2. Hide/show functionality such as:</h3>

    <tr:panelList >
        <tr:outputText value="simple/advance search"/>
    </tr:panelList>

    <h3>3. Hide/show details of a table row</h3>

    <tr:spacer height="12px"/>

    <tr:outputText
            value="On mobile devices the showDetail renders nothing itself, but does renders its children. "/>

    <tr:spacer height="12px"/>

    <tr:outputText value="If the &quot;disclosed&quot; property on the showDetail is set to false, the an icon
        indicating that the item is not disclosed will be rendered and the &quot;prompt&quot; facet will be rendered
        next to the icon. In this case the children of showDetail will not be rendered. If the &quot;disclosed&quot;
        property is set to false, the icon indicating that the item IS disclosed will be rendered and the and the
        &quot;prompt&quot; facet will be rendered next to the icon. In this case, the children of showDetail WILL be
        rendered. "/>

    <tr:spacer height="12px"/>

    <tr:outputText value="If the &quot;prompt&quot; facet is not present, but either the disclosedText or
        undisclosedText attributes are present (not both), the text in the attribute will appear next to the disclosure
        icon for both states."/>

    <tr:spacer height="12px"/>

    <tr:outputText value="If the &quot;prompt&quot; facet is not present and both the disclosedText and or
        undisclosedText attributes are present , the text in the disclosedText attribute will appear when
        disclosed=&quot;true&quot; and the text in the undisclosedText attribute will appear when
        disclosed=&quot;false&quot;. "/>

    <tr:spacer height="12px"/>

    <tr:outputText value="Finally, if the &quot;prompt&quot; facet is not present and neither the disclosedText or
        undisclosedText attributes are present, then the word &quot;hide&quot; will appear next to the disclosure icon
        when disclosed=&quot;true&quot; and the word &quot;show&quot; will appear next to the disclosure icon when
        disclosed=&quot;false&quot;. In this case both the &quot;hide&quot; and &quot;show&quot; labels will be
        links and mnd may be clicked in order to toggle the disclosure. "/>

    <tr:spacer height="12px"/>

    <tr:outputText value="Clicking on the icon of the showDetail will deliver a DisclosureEvent  to the server. If a
        &quot;prompt&quot; facet is used, changing the value of the disclosed attribute on this component will also
        deliver the event. "/>
    
</ui:composition>