How to build the following script.

Discussion in 'JavaScript' started by haradeep, Feb 23, 2011.

  1. #1
    Hi,

    I'm just learning javascript.

    I need one script for the following data.

    I'm having three headings.

    heading 1
    heading 2
    heading 3

    on clicking heading 1 it opens

    subheading 1
    subheading 2

    on clicking subheading 1 it opens

    subsubheading 1
    subsubheading 2

    My problem is when I open heading 1 it opens subheading 1 and 2, when I open heading 2, contents of heading 1 must disappear(switch contents) and only contents of heading 2 must appear.

    When I use style display: none, contents are moving on opening others.


    Below is my sample code

    Edit this or suggest me a new script. On clicking companies now boxes open. If boxes are present, display(or placement) of student boxes differ.

    <html>
    <head>
    <title>The Leader</title>
    <style type="text/css" >
    body
    	{
    	margin: auto;
    	width: 990px;
    	background-image: url('images/background.png');
    	font-family: Arial, Helvetica, sans-serif;
    }
    #border{
        height: 600px;
        width: 990px;
        background-color: #494949;
        border:2px solid #a1a1a1;
        -moz-border-radius:15px; /* Firefox */
        -webkit-border-radius: 15px;
        border-radius:15px;
        -moz-box-shadow: 5px 5px 2px #888888; /* Firefox */
        -webkit-box-shadow: 5px 5px 2px #888888; /* Safari and Chrome */
        box-shadow: 5px 5px 2px #888888;
    	margin-top: 20px;
    }
    #header{
    	text-align: center;
    	color: #4D4D4D;
    	margin-top: 10px;
    	padding: 10px;
    	}
    #subheader{
    	color: #0000FF;
    	
    	}
    #sone{
    	margin: 80px 0 10px 60px;
        font-size: 25px;
        border:2px solid #FFFFFF; 
        width:138px;
        padding: 10px;
        }
    #sone a{
        color: #e3dfdf;
        text-decoration: none;
    }
    #stwo{
    	margin: -64px 0 10px 350px;
        font-size: 25px;
        border:2px solid #FFFFFF; 
        width:106px;
        padding: 10px;
    	}
    #stwo a{
        color: #e3dfdf;
        text-decoration: none;
    }
    #sthree{
    	margin: -64px 0 10px 620px;
        font-size: 25px;
        border:2px solid #FFFFFF; 
        width:286px;
        padding: 10px;
    	}
    #sthree a{
        color: #e3dfdf;
        text-decoration: none;
    }
    #toggleText a{
        color:#ffffff;
        text-decoration: none;
        font-size: 20px;
    }
    
    #training{
    	margin: 20px 0 0 30px;
        border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 68px;
    }
    #placement{
    	margin: -47px 0 0 140px;
    	border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 104px;
    	}
    	
    #students a{
        color:#ffffff;
        text-decoration: none;
        font-size: 20px;
    }
    
    #india{
    	margin: 20px 0 0 250px;
    	border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 104px;
    	}
    	
    	#abroad{
    	margin: 20px 0 0 250px;
    	border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 104px;
    	}
    	
    	#tandp{
    	margin: 20px 0 0 250px;
    	border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 104px;
    	}
    	
    	#cexams{
    	margin: 20px 0 0 250px;
    	border:2px solid #FFFFFF;
    	padding: 3px;
    	width: 104px;
    	}
    
    
    
    </style>
    <script type="text/javascript" >
    
    function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
    ele.style.display = "none";
    
    }
    else {
    ele.style.display = "block";
    
    }
    }
    
        function toggle2() {
        var ele = document.getElementById("toggleText2");
        var text = document.getElementById("displayText2");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
    
        function toggle3() {
        var ele = document.getElementById("toggleText3");
        var text = document.getElementById("displayText3");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle4() {
        var ele = document.getElementById("toggleText4");
        var text = document.getElementById("displayText4");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle5() {
        var ele = document.getElementById("toggleText5");
        var text = document.getElementById("displayText5");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle6() {
        var ele = document.getElementById("toggleText6");
        var text = document.getElementById("displayText6");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle7() {
        var ele = document.getElementById("toggleText7");
        var text = document.getElementById("displayText7");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle8() {
        var ele = document.getElementById("toggleText8");
        var text = document.getElementById("displayText8");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle9() {
        var ele = document.getElementById("toggleText9");
        var text = document.getElementById("displayText9");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle10() {
        var ele = document.getElementById("toggleText10");
        var text = document.getElementById("displayText10");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle11() {
        var ele = document.getElementById("toggleText11");
        var text = document.getElementById("displayText11");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
        
        function toggle12() {
        var ele = document.getElementById("toggleText12");
        var text = document.getElementById("displayText12");
        if(ele.style.display == "block") {
        ele.style.display = "none";
    
        }
        else {
        ele.style.display = "block";
    
        }
        }
    
    </script> 
    </head>
    
    <body>
    <div id="border">
    <div id="header">
    <h1><img src="images/logo_1.png" alt=""</h1>
    </div> <!--End of header-->
    <div id="subheader">
    
    <h2 id="sone"><a href="javascript:toggle();" id="displayText">Companies</a></h2>
    
    
    <h2 id="stwo"><a href="javascript:toggle2();" id="displayText2">Students</a></h2>
    <h2 id="sthree"><a href="javascript:toggle3();" id="displayText3">Educational Institutions</a></h2>
    </div> <!--End of subheader-->
    
        <div id="toggleText" style="display: none;">
    
          <div id="training">  <a href="#">Training</a></div>
            <div id="placement"> <a href="#">Placement Consultancy Service</a></div>
    
        </div>
    
    
    <div id="toggleText2" style="display: none;">
    <div id="students">
        <div id="india"><a href="javascript:toggle4();" id="displayText4">Education in India</a></div>
        <div id="abroad"><a href="javascript:toggle5();" id="displayText5">Education in Abroad</a></div>
        <div id="tandp"><a href="#">Training and Placement</a></div>
        <div id="cexams"><a href="javascript:toggle6();" id="displayText6">Competitive Exams</a></div>
        
        </div>
        <div id="toggleText4" style="display: none;">
        CAT<br />
        MAT
    </div>
    <div id="toggleText5" style="display: none;">
        GRE<br />
        GMAT<br />
        SAT<br />
        TOEFL IBT<br />
        IELTS<br />
    </div>
    <div id="toggleText6" style="display: none;">
        Bank PO's
    </div>
    </div>
    <div id="toggleText3" style="display: none;">
        <a href="javascript:toggle7();" id="displayText7">Colleges</a>
        <a href="javascript:toggle8();" id="displayText8">Schools</a>
       <div id="toggleText7" style="display: none;">
        CRT<br />
        Campus Placements<br />
        FDP<br />
    </div>
    <div id="toggleText8" style="display: none;">
        IIT Foundation<br />
        FDP<br />
    </div>
    
    </div>
    </div>
    
    
    
    </body>
    </html>
    
    Code (markup):

     
    haradeep, Feb 23, 2011 IP