Javascript to toggle display text in JSF pages dynamically

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Insert title here</title>
            <%@ taglib uri="" prefix="h"%>
            <%@ taglib uri="" prefix="f"%>
            <%@taglib prefix="c" uri="" %>
            <script language="JavaScript">
                function toggle(id){
                ul = "ul_" + id;
                img = "img_" + id;
                ulElement = document.getElementById(ul);
                imgElement = document.getElementById(img);
                if (ulElement){
                if (ulElement.className == 'closed'){
                ulElement.className = "open";
                imgElement.src = "collapse.gif";
                ulElement.className = "closed";
                imgElement.src = "expand.gif";
                .open {
                display: block;
                .closed {
                display: none;
                li {
                list-style-type: none;
                padding-top: .2em;
                padding-bottom: .2em;
                li img {
                vertical-align: middle;
    <%int i=1; %>
            <div class="open">
                <c:forEach items="${myBackingBean.list}" var="pojoDetails"
                    <div id="item<%=i%>>">
                        <a onclick="toggle('item<%=i%>');">
                            <img src="expand.gif" alt="" id="img_item<%=i%>" border="0">
                        <c:out value="${pojoDetails.title}" />
                        <div id="ul_item<%=i%>" class="closed">
                            <div id="item<%=i%>_1">
                                <c:out value="${pojoDetails.text}" />

About cuppajavamattiz
Matty Jacob - Avid technical blogger with interests in J2EE, Web Application Servers, Web frameworks, Open source libraries, Relational Databases, Web Services, Source control repositories, ETL, IDE Tools and related technologies.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: