Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    Visakhapatnam
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Small help with javascript

    Hi all,

    I got a small problem. Please help me.

    Below is the code for toggle text. My problem is

    Whenever I click Toggle div 1 a Contents of div1 opens. I want a code to hide
    Contents of div1 when I click Toggle div 2(Shows only Contents of div2) or Toggle div 3 (Shows only Contents of div3) and vice versa.


    Code:
    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    <script>
    function toggle(x){
    var divx = document.getElementById('div'+x)
    if (divx.style.display == 'none') {
    divx.style.display = 'block'
    } else {
    divx.style.display = 'none'
    }
    }
    </script>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    Try this ...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function toggle(x){
      var sel = document.getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id != 'div'+x) { document.getElementById(sel[i].id).style.display = 'none'; }
      }
      var divx = document.getElementById('div'+x)
      if (divx.style.display == 'none') {
        divx.style.display = 'block'
      } else {
        divx.style.display = 'none'
      }
    }
    
    </script>
    
    </head>
    <body>
    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    </body>
    </html>
    Close?

  • Users who have thanked jmrker for this post:

    haradeep (02-22-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by haradeep View Post
    Hi all,

    I got a small problem. Please help me.

    Below is the code for toggle text. My problem is

    Whenever I click Toggle div 1 a Contents of div1 opens. I want a code to hide
    Contents of div1 when I click Toggle div 2(Shows only Contents of div2) or Toggle div 3 (Shows only Contents of div3) and vice versa.


    Code:
    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    <script>
    function toggle(x){
    var divx = document.getElementById('div'+x)
    if (divx.style.display == 'none') {
    divx.style.display = 'block'
    } else {
    divx.style.display = 'none'
    }
    }
    </script>
    I not exactly sure but i think this is what you want

    Code:
    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    <script>
    var activeDiv = "";
    function toggle(x){
    	var divx = document.getElementById('div'+x) 
    	if(activeDiv && activeDiv != divx){
    		activeDiv.style.display = 'none';
    		activeDiv = "";
    	}
    	if (divx.style.display == 'none') {
    		divx.style.display = 'block'
    		activeDiv = divx;
    	} else {
    		divx.style.display = 'none'
    	}
    	
    }
    </script>

  • Users who have thanked DaveyErwin for this post:

    haradeep (02-22-2011)

  • #4
    New Coder
    Join Date
    Aug 2009
    Location
    Visakhapatnam
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the scripts.

    Both scripts worked. Still I'm having one more step to complete it.

    I want to display both contents of div1(on clicking it.) and contents of div4.

    In present script contents of div1 is disappearing on clicking it.

    Code:
    <div align="left" id='div4' style='display:none'>Contents of div4</div>
    <div align="left" id='div5' style='display:none'>Contents of div5</div>
    <div align="left" id='div6' style='display:none'>Contents of div6</div>
    <div align="left" id='div1' style='display:none'><button onclick="toggle(4)">Contents of div1</button></div>
    <div align="left" id='div2' style='display:none'><button onclick="toggle(5)">Contents of div2</button></div>
    <div align="left" id='div3' style='display:none'><button onclick="toggle(6)">Contents of div3</button></div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    <script>
    var activeDiv = "";
    function toggle(x){
    	var divx = document.getElementById('div'+x) 
    	if(activeDiv && activeDiv != divx){
    		activeDiv.style.display = 'none';
    		activeDiv = "";
    	}
    	if (divx.style.display == 'none') {
    		divx.style.display = 'block'
    		activeDiv = divx;
    	} else {
    		divx.style.display = 'none'
    	}
    	
    }
    </script>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    jmrker's script does not lend itself to that.

    Code:
    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <div align="left" id='div4' style='display:none'>Contents of div4</div>
    <div align="left" id='div5' style='display:none'>Contents of div5</div>
    <div align="left" id='div6' style='display:none'>Contents of div6</div>
    <br><br>
    
    <button onclick="toggle(1)">Toggle div 1 and div 4</button> 
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    
    <script type = "text/javascript">
    
    var last;
    function toggle(which) {
    for (var i =1; i <=6; i++) {
    document.getElementById("div" + i).style.display = "none";  // hide all divs
    }
    if (last!=which) {  // if not toggled
    document.getElementById("div" + which).style.display = "block"; // show wanted div
    if (which == 1) {
    document.getElementById("div4").style.display = "block";
    }
    last = which;
    }
    
    }
    
    </script>
    Last edited by Philip M; 02-22-2011 at 04:17 PM.

  • #6
    New Coder
    Join Date
    Aug 2009
    Location
    Visakhapatnam
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    on clicking of contents of div1 I want contents of div4 to be displayed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •