Javascript to toggle display text in JSF pages dynamically

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Insert title here</title>
            <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
            <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
            <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
            <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";
                }else{
                ulElement.className = "closed";
                imgElement.src = "expand.gif";
                }
                }
                } 
</script>
            <style>
 
                .open {
                display: block;
                }
                .closed {
                display: none;
                }
                li {
                list-style-type: none;
                padding-top: .2em;
                padding-bottom: .2em;
                }
 
                li img {
                vertical-align: middle;
                }
</style>
    </head>
    <%int i=1; %>
    <f:view>
        <body>
            <div class="open">
                <c:forEach items="${myBackingBean.list}" var="pojoDetails"
                    varStatus="loopStatus">
                    <div id="item<%=i%>>">
                        <a onclick="toggle('item<%=i%>');">
                            <img src="expand.gif" alt="" id="img_item<%=i%>" border="0">
                        </a>
                        <c:out value="${pojoDetails.title}" />
                        <div id="ul_item<%=i%>" class="closed">
                            <div id="item<%=i%>_1">
                                <c:out value="${pojoDetails.text}" />
                            </div>
                        </div>
                    </div>
                    <%i++;%>
                </c:forEach>
            </div>
        </body>
    </f:view>
</html>

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:

WordPress.com Logo

You are commenting using your WordPress.com 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: