SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle DIV visibility using onClick problem

    Hi, I have used the script obtained from this thread which has been very helpful: Show/Hide

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     
    <html>
    <head>
    <title>Untitled</title>
     
    <script type="text/javascript">
     	function show_hide(el) {
     		var snum = 2;  
     		var obj = document.getElementById("box" + snum); 	
     		while (obj) 
     		{	
     		  if (obj.id == el) obj.style.display = "";	
     		  else obj.style.display = "none";
     		obj = document.getElementById("box" + snum--); 
     		}
     	}
    </script>
    <style>
     	#box1{
     		height: 200px;
     		width: 200px;
     		border: 1px solid #ff0000;
     		background: #ddd;
     		padding: 10px;
     	}
     	#box2{
     		height: 200px;
     		width: 200px;
     		border: 1px solid #ff00ff;
     		background: #ccc;
     		padding: 10px;
     	}
    </style>
    </head>
     
    <body>
    <a href="#" onclick="show_hide('box1');">Box 1</a> |
    <a href="#" onclick="show_hide('box2');">Box 2</a>
    <hr />
    <div id="box1" style="display: none;">
     	<p>This is the text in box 1</p>
    </div>
    <div id="box2" style="display: none;">
     	<p>This is the text in box 2</p>
    </div>
    </body>
    </html>
    The problem I am having is that when someone clicks on the 'Box 1' or 'Box 2' etc. and the DIV appears I would then like the text 'Box 1' or 'Box 2' to dissappear so that the user is left with the activated DIV and the 'Close' text.

    Is this possible, I had an idea that it might mean adding something to the onClick event? Any help appreciated. Many thanks.

    Stuart

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Try changing:

    Code:
    var obj = document.getElementById("box" + snum);
    to

    Code:
    var obj = document.getElementById(el);

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi chris_fuel I copied the wrong code first time around, that was a slightly earlier version, here is the newer code with close links attached:

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled</title>
    
    <script type="text/javascript">
    function show_hide(el){
    var snum =2;
    var obj = document.getElementById("box" + snum);
    while(obj)
    {
    if(obj.id == el) obj.style.display = "";
    else obj.style.display = "none";
    obj = document.getElementById("box" + snum--);
    }
    }
    function close_it(which){
    	document.getElementById(which).style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    <a href="#" onclick="show_hide('box1');">Box 1</a> |
    <a href="#" onclick="show_hide('box2');">Box 2</a>
    <hr />
    <div id="box1" style="display: none;">
    <p>This is the text in box 1</p>
    <a href="#" onclick="close_it('box1');">Close</a>
    </div>
    <div id="box2" style="display: none;">
    <p>This is the text in box 2</p>
    <a href="#" onclick="close_it('box2');">Close</a>
    </div>
    </body>
    </html>
    I did try your method on both the old and the new versions and it does the same thing, i.e. the text 'Box 1' or 'Box 2' remains after the onClick event has activated the DIV.

    Cheers

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled</title>
    <script type="text/javascript">
    function show(id)
    {
      var obj = document.getElementById(id);
      obj.style.display = 'block';
    }
    function close(id)
    {
      var obj = document.getElementById(id);
      obj.style.display = 'none';
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="show('box1');">Box 1</a> | 
    <a href="#" onclick="show('box2');">Box 2</a>
    <hr />
    <div id="box1" style="display: none;">
      <p>This is the text in box 1</p>
      <a href="#" onclick="close('box1');">Close</a>
    </div>
    <div id="box2" style="display: none;">
      <p>This is the text in box 2</p>
      <a href="#" onclick="close('box2');">Close</a>
    </div>
    </body>
    </html>
    Try this code instead.

  5. #5
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi chris, that works as far as opening the DIV but the close button does not work, also, the text buttons 'Box 1' and Box 2' remain after they have been pressed.

    The original script I have works in that I can both open and close the DIV, it is simply that wee bit of text I need to dissappear 'Box 1/2' after someone has pressed it so that it makes a seamless paragraph without the afforementioned text appearing in the middle.

    Thanks again

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, looks like close() is something used internally. This code:

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml"> <head>
    <title>Untitled</title>
    <script type="text/javascript">
    function show(id)
    {
            var obj = document.getElementById(id);
            var link = document.getElementById(id + "_show");
            obj.style.display = '';
            link.style.display = 'none';
    }
    function close_box(id)
    {
            var obj = document.getElementById(id);
            var link = document.getElementById(id + "_show");
            obj.style.display = 'none';
            link.style.display = '';
    }
    </script>
    </head>
    <body>
    <a href="#" id="box1_show" onclick="show('box1');">Box 1</a> |
    <a href="#" id="box2_show" onclick="show('box2');">Box 2</a>
    <hr />
    <div id="box1" style="display: none;">
      <p>This is the text in box 1</p>
      <a href="#" onclick="close_box('box1');">Close</a>
    </div>
    <div id="box2" style="display: none;">
      <p>This is the text in box 2</p>
      <a href="#" onclick="close_box('box2');">Close</a>
    </div>
    </body>
    </html>
    works for me, and I believe has the intended effect that you were looking for.

  7. #7
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks for all your help chris.

    Stuart

  8. #8
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to be a right pain now, the current script works perfectly but I would like the ability for only one hidden div to be open at a time, so say the first box is activated and the div is open, someone could click on the link to open the second div and the first one would then close.

    The last script done this but obviously the new method is quite different to that of the original. I looked at how the first script worked and how I could possibly integrate that into the new script but am totally lost, JavaScript isn't my strong point.

    Thanks again

  9. #9
    SitePoint Addict Jack Matier's Avatar
    Join Date
    Feb 2005
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    eh.. I'm not going to write out the code (though I might) but it might help to find the class that someone made up for getElementsByClass name. You can use array's with that and using a loop to finish it off would work nicely.

  10. #10
    SitePoint Addict Jack Matier's Avatar
    Join Date
    Feb 2005
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so I did it anyway

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript">
    // Very valuable function.. Just think of "getElementById".
    function getElementsByClass(searchClass,node,tag) {
    	var classElements = new Array();
    	if ( node == null )
    		node = document;
    	if ( tag == null )
    		tag = '*';
    	var els = node.getElementsByTagName(tag);
    	var elsLen = els.length;
    	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    	for (i = 0, j = 0; i < elsLen; i++) {
    		if ( pattern.test(els[i].className) ) {
    			classElements[j] = els[i];
    			j++;
    		}
    	}
    	return classElements;
    }
    function switchBox(box) {
    	var classArray=getElementsByClass("box");
    	for(i=0;i<classArray.length;i++) {
    		if(i==box) {
    			classArray[i].style.display="block";
    		} else {
    			classArray[i].style.display="none";
    		}
    	}
    }
    </script>
    <style type="text/css">
    .box {
    	display:none;
    }
    </style>
    </head>
    
    <body>
    <a href="#" onclick="switchBox('0');">Box 1</a> | <a href="#" onclick="switchBox('1');">Box 2</a>
    <hr />
    <div class="box">
      <p>This is the text in box 1</p>
    </div>
    <div class="box">
      <p>This is the text in box 2</p>
    </div>
    
    
    </body>
    </html>
    The thing is.. I believe this can be done using just css as well... which would be good to look into. Another neat thing would be looking into javascript cookies and writing a cookie to a file which can be read on either the serverside or client side.

  11. #11
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made an object to do the handling on it. Here's the HTML:

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml"> <head>
    <title>Untitled</title>
    <script type="text/javascript" src="group.js">
    </script>
    </head>
    <body>
    <a href="#" id="box1_show" onclick="groupDivs.show('box1');">Box 1</a> |
    <a href="#" id="box2_show" onclick="groupDivs.show('box2');">Box 2</a>
    <hr />
    <div id="box1" style="display: none;">
      <p>This is the text in box 1</p>
      <a href="#" onclick="groupDivs.hide('box1');">Close</a>
    </div>
    <div id="box2" style="display: none;">
      <p>This is the text in box 2</p>
      <a href="#" onclick="groupDivs.hide('box2');">Close</a>
    </div>
    <script type="text/javascript">
    var groupDivs = new groupShowHide(Array('box1','box2'));
    </script>
    </body>
    </html>
    and here's group.js

    Code:
    function groupShowHide(element_list)
    {
            var groupShowHideClass =
            {
                    groupList: Array(),
                    construct: function(element_list)
                    {
                            for ( var i=0; i < element_list.length ; i++)
                            {
                                    this.groupList.push(document.getElementById(element_list[i]));
                            }
                    },
                    show: function(id)
                    {
                            for ( var i = 0; i < this.groupList.length ; i++)
                            {
                                    if ( this.groupList[i].id == id )
                                    {
                                            this.groupList[i].style.display='';
                                    }
                                    else
                                    {
                                            this.groupList[i].style.display='none';
                                    }
                            }
                    },
                    hide: function(id)
                    {
                            for ( var i = 0; i < this.groupList.length; i++ )
                            {
                                    if ( this.groupList[i].id == id )
                                    {
                                            this.groupList[i].style.display='none';
                                    }
                            }
                    }
            }
            groupShowHideClass.construct(element_list);
            return groupShowHideClass;
    }
    So this code does a one time storage of the elements it needs to check and pushes them into an array in the object. This allows the elements to be encapsulated inside of the object, producing a faster lookup. The object also holds the event handlers, allowing flexibility in what elements actually instantiate the actions. There's an article in my sig that explains the object creation format.

  12. #12
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, both worked but am using Chris' as it has the close button still, cheers for all your help. Got a lot of work ahead of me if I want to master JavaScript I think. Cheers.


Bookmarks

Posting Permissions

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