This discussion is archived
2 Replies Latest reply: Dec 4, 2012 6:15 AM by 960507 RSS

Swap contents after click on the link

977405 Newbie
Currently Being Moderated

I need to swap contents after click on the link. For example. My site has 4 modules: Header, menu, content and footer. I have these divs in Index.xhtml and I include these modules from other files (np header.xhtml - > <ui:composition> Header </ui:composition> ). Now i don't want to create for example 10 copies of Index.xhtml, just one and when i click on the link in menu, content must swap. (I want to swap including file in <div id=content> )

For example - >

In content is displayed file First.xhtml

i'm clicking on the link second

and now in content is displayed file Second.xhtml

I don't have to use Ajax.

Sorry for my language level, i learn :)

  • 1. Re: Swap contents after click on the link
    jmsjr Newbie
    Currently Being Moderated
    Not sure if this will help you, but I did have some similar requirement ( e.g. A drop-down would determine what "content" to show beneath the dropdown .. which are actually separate XHTML files that I include ).

    I did this using RichFaces <rich:togglePanel>, where you can toggle between the different panels either via Javascript(client), Ajax, or form-submit(server).

    An example of what I did:
                <rich:togglePanel id="memberAndNOCTogglePanel" switchType="client" activeItem="#{insuranceCase.claimType}">
                    <rich:togglePanelItem id="DTH">
                        <ui:include src="/templates/insurance/memberDetailsDTH.xhtml"/>
                        <ui:include src="/templates/insurance/nocDetailsDTH.xhtml"/>
                    <rich:togglePanelItem id="TPD">
                        <ui:include src="/templates/insurance/memberDetailsTPD.xhtml"/>
                        <ui:include src="/templates/insurance/nocDetailsTPD.xhtml"/>
    .. Then the panels are swapped / toggled by a h:selectOneMenu, as follows, when using Javascript / client toggling.
    <h:selectOneMenu id="f_clmTyp" value="#{insuranceCase.claimType}"
                                onchange="alert('Changing the Claim Type will clear the NOC Details.'); 
                                selectedVal = this.options[this.selectedIndex].value; 
                                return true;">
    You can look at their example at
  • 2. Re: Swap contents after click on the link
    960507 Newbie
    Currently Being Moderated
    Use the rendered attribute on a h:panelGroup.


    <h:panelGroup rendered="#{bean.option1}">
    your content A
    <h:panelGroup rendered="#{bean.option2}">
    your content B


  • Correct Answers - 10 points
  • Helpful Answers - 5 points