hiding and showing div tag using java script of child window from parent window
<p>i want to hid and show the div tag of my jsp page from parent window and also i dont want use open <code>window.open()</code> if i m using that than getting the reference  of child window and  then i m executing the java script funtion of child window this solution causing me a problem  cause window is loaded first than executed the java script function taking  some  time to hid div tag or some time its reveal every div tag
                                                                                                                                                   so plz tell me the other solution or manipulate my logic so that i can show and hid div tag from parent window very smoothly. My requirment is not to open a new window but open a new tab in which all div tag is present according the home page button click div tag is showed</p>

<p>this is my  logic of java script</p>

<pre><code>function showDiv(id) {

        var div1 = document.getElementById('div1');

        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        // Check what the value of the button pressed and displays the correct div
        if (id == 1)
            div1.style.display = 'block';
        if (id == 2) {
            div2.style.display = 'block';
        }

        if (id == 3) {
            div3.style.display = 'block';
        }
    }
</code></pre>

<p>this is child jsp</p>

<pre><code> &lt;script type="text/javascript"&gt;
    function showDiv(id) {

        var div1 = document.getElementById('div1');

        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        // Check what the value of the button pressed and displays the correct div
        if (id == 1)
            div1.style.display = 'block';
        if (id == 2) {
            div2.style.display = 'block';
        }

        if (id == 3) {
            div3.style.display = 'block';
        }
    }
    function doAllThese(url) {

        if (url == 'FindById') {
            document.form.action = "/EmployeeWebSpring/search/FindById";
            self.close();
        }
        if (url == 'FindByName') {
            document.form.action = "/EmployeeWebSpring/search/FindByName";
        }
        if (url == 'FindByDeptNO') {
            document.form.action = "/EmployeeWebSpring/search/FindByDeptNO";
        }
    }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form:form name="form" commandName="employeeForm" method="post"&gt;




        &lt;div id="div1" style="display: block;"&gt;
            Employee_ID:
            &lt;form:input path="employeeNumber" /&gt;
            &lt;input type="submit" name="method" value="FindById" id="FindById"
                onclick="doAllThese(this.value)" /&gt;
        &lt;/div&gt;
        &lt;div id="div2" style="display: none;"&gt;

            Employee_Name
            &lt;form:input path="firstName" /&gt;
            &lt;input type="submit" name="method" value="FindByName"
                onclick="doAllThese(this.value)" /&gt; &lt;br /&gt;
            &lt;font size=3&gt;For Searching the employees by&lt;b&gt;Employee
                    Name&lt;/b&gt;&lt;br /&gt;you can use % match all the records with the given
                pattern
            &lt;/font&gt;&lt;br /&gt; &lt;font size="2"&gt; &lt;i&gt;e.g &lt;b&gt; for search by&lt;/b&gt;EmployeeName&lt;br /&gt;
                    matches alL the employees whose name starts with character &lt;b&gt;S&lt;/b&gt;&lt;/i&gt;&lt;/font&gt;
        &lt;/div&gt;

        &lt;div id="div3" style="display: none;"&gt;
            Employee_Name
            &lt;form:input path="departmentId" /&gt;
            &lt;input type="submit" name="method" value="FindByDeptNO"
                onclick="doAllThese(this.value)" /&gt;
        &lt;/div&gt;

    &lt;/form:form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and this is my home.jsp</p>

<pre><code> &lt;%@page import="java.util.List"%&gt;

&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%&gt;



&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;link href="../css/styles.css" rel="stylesheet" type="text/css"&gt;
&lt;title&gt;Home&lt;/title&gt;
&lt;script type="text/javascript"&gt;
    function LoadByName(windowHeight, windowWidth) {
        var centerWidth = (window.screen.width - windowWidth) / 2;
        var centerHeight = (window.screen.height - windowHeight) / 2;
        var newWindow = window.open('../search/searchPage', 'mywindow',
                'resizable=0,width=' + windowWidth + ',height=' + windowHeight
                        + ',left=' + centerWidth + ',top=' + centerHeight);
        alert("Name window");
        newWindow.showDiv(2);

    }
    function LoadById(windowHeight, windowWidth) {
        var centerWidth = (window.screen.width - windowWidth) / 2;
        var centerHeight = (window.screen.height - windowHeight) / 2;
        var newWindow = window.open('../search/searchPage', 'mywindow',
                'resizable=0,width=' + windowWidth + ',height=' + windowHeight
                        + ',left=' + centerWidth + ',top=' + centerHeight);
        alert(newWindow);
        newWindow.showDiv(1);


    }

    function LoadByDeptNo(windowHeight, windowWidth)
    {
        var centerWidth = (window.screen.width - windowWidth) / 2;
        var centerHeight = (window.screen.height - windowHeight) / 2;
        var newWindow = window.open('../search/searchPage', 'mywindow',
                'resizable=0,width=' + windowWidth + ',height=' + windowHeight
                        + ',left=' + centerWidth + ',top=' + centerHeight);
        alert(newWindow);
        newWindow.showDiv(3);
    }


&lt;/script&gt;
&lt;/head&gt;
&lt;jsp:include page="Header.jsp"/&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;br&gt;
&lt;br&gt;

&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and this is header.jsp</p>

<pre><code>    &lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link href="../css/styles.css" rel="stylesheet" type="text/css"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;img src="../images/Header.png" width="1250" height="120" /&gt;
    &lt;div id='cssmenu'&gt;
        &lt;ul&gt;
            &lt;li class='active '&gt;&lt;a href='index.html'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class='has-sub '&gt;&lt;a href='#'&gt;&lt;span&gt;NewEntity&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Department&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Employee&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Project&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;&lt;/li&gt;
            &lt;li class='has-sub '&gt;&lt;a href='#'&gt;&lt;span&gt;FindEmployee&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="javascript:LoadById(250,500)"&gt;&lt;span&gt;FindEmployeeById&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:LoadByName(250,500)"&gt;&lt;span&gt;FindEmployeeByName&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=' javascript:LoadByDeptNo(250,250)'&gt;&lt;span&gt;FindByDepartmentId&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="/EmployeeWebSpring/search/GetAllEmployee"&gt;&lt;span&gt;GetAllEmployee&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;&lt;/li&gt;

            &lt;li class='has-sub '&gt;&lt;a href='#'&gt;&lt;span&gt;FindDepartment&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="javascript:department()"&gt;&lt;span&gt;FindDepartmentById&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="javascript:LoadByName(250,500)"&gt;&lt;span&gt;FindDepartmentByName&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="../department/GetAllDepartment"&gt;&lt;span&gt;GetAllDepartment&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
