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):