Even with PrimeFaces projects, there are cases/areas where you may want just a simple collapsible frame. This demonstration should answer that need.


<pre class="brush: xml; highlight:[7,8,9,10,11,12,14,24,30]">
&lt;html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"> 
 &lt;h:head>
 &lt;title>Panel Visibility Toggle Demonstration&lt;/title>

 &lt;link rel="stylesheet" 
 href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
 &lt;script type="text/javascript" 
 src="http://code.jquery.com/jquery-1.8.3.js">&lt;/script>
 &lt;script type="text/javascript" 
 src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">&lt;/script>

 &lt;script type="text/javascript" src="./js/toggle.js">
 &lt;/script>
 &lt;/h:head>

 &lt;h:body >
 &lt;ui:repeat value="#{collapsible.rows}" 
 var ="rows">
 &lt;h:panelGrid>
 &lt;h:panelGroup>
 &lt;h:outputLink value="javascript:void(0)"
 onclick="vistoggle('#icon#{rows.id}',
 '#body#{rows.id}')" >

 &lt;h:outputText value="#{rows.title}" />
 &lt;/h:outputLink>

 &lt;span style="display: inline-block;margin-right:2px;">
 &lt;span id="icon#{rows.id}" class="ui-icon ui-icon-plus" 
 style="float:left">
 &lt;/span>
 &lt;/span> 
 &lt;/h:panelGroup>

 &lt;div style="display:none;" id="body#{rows.id}">
 #{rows.body}
 &lt;/div>
 &lt;/h:panelGrid>
 &lt;/ui:repeat>
 &lt;/h:body>
&lt;/html> 
</pre>



In the above page, we used plus (+)(ui-icon-plus) and minus (-) icons to indicate that the content is expanded and collapsed. These are jQuery UI icons. You may want to change it to suit your needs. Lines 8 to 12 are jQuery files. For PrimeFaces users, you may want to remove them.


All &lt;div/> are initially collpased.&nbsp;&nbsp;The ID of the frame takes any name and appended with a counter from the backing code, making the ID unique.



The class below represents the backing bean for our page. It is a standard JSF bean, List getRows () being the value of our &lt;ui:repeat />



<pre class="brush: java;highlight:35">

package info.kahimyang.tests;

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Collapsible {

 public Collapsible() {
 }
 
 List&lt;RepeatRows> rows;
 
 public List&lt;RepeatRows> getRows () { 
 // populate rows
 return rows;
 }
 
 
 public void setRows (List&lt;RepeatRows> s) {
 rows = s;
 }
 
 public class RepeatRows { 
 RepeatRows () {}
 
 String id;
 String title;
 String body;
 
 // getters and setters
 public String getId () {
 return id;
 }
 public void setId (String s) {
 id=s;
 }
 // Other getters and setters
 } 
}


</pre>



<h3>
The JavaScript onclick handler
</h3>





<pre class="brush: js">
var prevIcon=null;
var prevPanel=null;
 
function vistoggle (icon, panel){
 if (prevPanel != null && panel != prevPanel) {
 $(prevPanel).hide('slow'); 
 } 
 
 if($(panel).is(":visible")){
 $(panel).hide ('slow');
 }
 else {
 $(panel).show ('slow');
 }
 
 prevPanel=panel;
 
 if($(icon).hasClass("ui-icon-plus")){
 $(icon).removeClass("ui-icon-plus");
 $(icon).addClass("ui-icon-minus")
 }else{
 $(icon).removeClass("ui-icon-minus");
 $(icon).addClass("ui-icon-plus")
 } 
 
 if(prevIcon != null && icon!=prevIcon){ 
 $(prevIcon).removeClass("ui-icon-minus");
 $(prevIcon).addClass("ui-icon-plus") 
 } 
 
 prevIcon=icon;
 
} 

</pre>



Our onclick JavaScript handler takes the icon panel (span) and the panel (div) we want as collapsible. Please notice the use of removeClass and addClass. You can replace them with toggleClass if desired. 


The icons may be removed completely, if not needed.



That's it Good Luck.

Implementing a collapsible ui:repeat rows in JSF