Custom link like rich:simpleTogglePanel - jsf

Question

I want to change the style of the rich:simpleTogglePanel to look like as a common link would.
http://livedemo.exadel.com/richfaces-demo/richfaces/simpleTogglePanel.jsf?c=simpleTogglePanel&tab=usage
This page shows exactly what I want to do and what I'm getting right now.
I want to do something that looks exactly like the 'View source' link that stands below every example. The code I'm using is the same as seen in the 'Client Switch Type' example:
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
The switching between showing and hiding the toggle panel content
performs on the client side.
</rich:simpleTogglePanel>
My goal is to create an 'advanced search' link under a search bar.
The panel will contain the advanced search contents. (the extra fields)
I'm using JSF 1.2 and Richfaces.

Answer 1

Am not sure if I exactly understood your question. There are 2 variants in which am seeing your question.
1. Make the contents under the rich:simpleTogglePanel as link which are clickable.
For this you can try out below code.
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<rich:dataGrid var="links" value="#{yourBean.linksList}" columns="6"
width="877px">
<h:commandLink actionListener="#{yourBean.someAction}">
</h:commandLink>
</rich:simpleTogglePanel>
2. If you want rich:simpleTogglePanel header to be presented as link
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<f:facet name="header" >
<h:panelGroup>
<h:outputText value="yourLinkName" styleClass="linkClass">
</h:outputText>
</h:panelGroup>
</rich:simpleTogglePanel>
<style type="text/css">
.linkClass{
text-decoration: underline;
}
</style>

Answer 2

If you want a box openning and closing and style it easily, the best way would be to make it with jQuery. As RichFaces already load jQuery you could do it as follow :
Your link
<div id="content" style="display: none">Your content</div>
Of course you can use RichFaces component, but you will have to override many CSS classes or disable RichFaces skin, which will disable styling for every components.
EDIT : You'll have to force RichFaces to load the jQuery library with <a4j:loadScript src="resource://jquery.js"/> if you are not using any ajax component in the view.

Answer 3

If you want to make the bar disappear, you have to override the default CSS and add few more of yours.
Below is the code,
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<f:facet name="closeMarker">
<h:panelGroup styleClass="open">
<h:outputText styleClass="yourClass" value="yourText"/>
</h:panelGroup>
</f:facet>
</rich:simpleTogglePanel>
<style type="text/css">
.open {
background-color: white;
}
</style>
You will have to override these default CSS to achieve your other affects. rich-stglpanel, rich-stglpanel-header, rich-stglpnl-marker etc.
For details, please refer RichFaces-SimpleTogglePanel guide

Answer 4

First, thanks for the answers!
I asked for a way to change the simpleTogglePanel so it looked like the view source link in the page mentioned, but I found that was the wrong way to go.
I achieved my goal using a h:commandLink:
<h:commandLink value="Advanced Search" action="#{MyBean.toggleHiddenPanel }" />
to change the value of a boolean in my bean and used the rendered attribute to show/hide the fields I needed:
<h:panelGrid id="hiddenPanel" columns="4" >
<h:outputText value="date1:" rendered="#{MyBean.hiddenPanel}" />
<rich:calendar value="#{MyBean.date1}" rendered="#{MyBean.hiddenPanel}"
locale="US" popup="true" datePattern="d/M/yy HH:mm"
cellWidth="24px" cellHeight="22px" style="width:200px" />
<h:outputText value="date2:" rendered="#{MyBean.hiddenPanel}" />
<rich:calendar value="#{MyBean.date2}" locale="US" rendered="#{MyBean.hiddenPanel}"
popup="true" datePattern="d/M/yy HH:mm" cellWidth="24px"
cellHeight="22px" style="width:200px" />
<br />
<h:outputText value="Another field:" rendered="#{MyBean.hiddenPanel}" />
</h:panelGrid>
ps.: I changed the name of the variables because the project is confidential