Yes, that's possible with a little help of JavaScript. Easiest would be to give the ID of the section div elements as radio button value and then loop through all radio buttons and show/hide the element based on the button's checked
state. At end you should let the JS function return false
when any button is checked so that the button's default action won't be invoked and the form won't be submitted to the server.
Here's a kickoff example:
<h:form id="form">
<h:selectOneRadio id="radio">
<f:selectItem itemValue="section1" itemLabel="Show section1" />
<f:selectItem itemValue="section2" itemLabel="Show section2" />
<f:selectItem itemValue="section3" itemLabel="Show section3" />
</h:selectOneRadio>
<h:commandButton id="button" value="show section"
action="#{bean.submit}" onclick="return showSection(this.form)" />
<h:messages />
</h:form>
<h:panelGroup layout="block" id="section1" class="section">section1</h:panelGroup>
<h:panelGroup layout="block" id="section2" class="section">section2</h:panelGroup>
<h:panelGroup layout="block" id="section3" class="section">section3</h:panelGroup>
with this CSS
.section {
display: none;
}
and this JS
function showSection(form) {
var radiobuttons = form['form:radio'];
var selected = false;
for (var i = 0; i < radiobuttons.length; i++) {
var radiobutton = radiobuttons[i];
var section = document.getElementById(radiobutton.value);
if (radiobutton.checked) {
section.style.display = 'block';
selected = true;
} else {
section.style.display = 'none';
}
}
return !selected; // Submits to server if none is selected.
}
and JSF bean (we of course assume that this action will only be invoked if none is selected).
public void submit() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Please select!"));
}