SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Hiding/Unhiding

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding/Unhiding

    Hi!

    I have three links and a set of text boxes are displayed, when I click on a link. (Eachlink has some text boxes to be displayed) Unclicking on a link hides the text boxes of that particular link.

    Problem - When a link is clicked , it displays text boxes (Fine). Witcout clicking it (the link) again (to hide the text boxes), I click on other link. (Text boxes of that link are displayed wthout hiding the text boxes of the previous one.) How to fix this?

    I have put the text boxes in <tbody> tag and hiding and unhiding it through a javascript.

    Code:
    function hideShow(el_id)
    	{
    		var el=document.getElementById(el_id);
    		if(el_id.style.display!="none")
    		{
    		  el_id.style.display="none";
    		}else
    		{
    		  el_id.style.display="";
    		}
    	}
    <
    HTML Code:
    a href="#" onclick="hideShow(row1);">Strategy and Objective</a><br />
    				<a href="#" onclick="hideShow(row2);">General News</a><br />
    				<a href="#" onclick="hideShow(row3);">Fund Specific News</a><br />
    
    <tbody id="row1" style="">
    				<tr>
    					<td class="fmText" valign=top>Strategy and Objective </td>
    					<td><textarea name=prod_desc cols=70 rows=5><%=rs("prod_desc")%></textarea></td>
    				</tr>
    			<tbody>
    			
    			<tbody id="row2" style="">
    				<tr>
    					<td class="fmText" valign=top>Portfolio Management </td>
    					<td><textarea name="internetmanager" cols=70 rows=5><%=rs("prod_internetmanager")%></textarea></td>
    				</tr>
    			<tbody>
    
    <tbody id="row3" style="">
    				<tr>
    					<td class="fmText" valign=top>Fund Announcement</td>
    					<td><textarea name="fundstory" cols=70 rows=5></textarea></td>
    				</tr>
    			<tbody>

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to add to hideShow function before 'if' checking a for loop that will 'display=none' all text boxes. This way your function will first close all tboxes and than open only the clicked one.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Where's the table? Why are you using multiple <tbody>s? Why not just give each row an ID?

    2) I am concerned that your code is not following JavaScript Best Practices. I strongly recommend you read up on them.

    3) You were using "el_id" three places where you should have been using "el".
    Code:
    function hideShow(el_id){
      var el=document.getElementById(el_id);
      if(el.style.display!="none"){
        el.style.display="none";
      } else {
        el.style.display="";
      }
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where's the table? Why are you using multiple <tbody>s? Why not just give each row an ID?

    Ans- I am having a table and using multipl <tbody>s because, each of them have more than one textboxes(which I didnt show in the posted code)

    Bosko:

    Try to add to hideShow function before 'if' checking a for loop that will 'display=none' all text boxes. This way your function will first close all tboxes and than open only the clicked one.

    How to do this? I am afraid, I have not written much code in javascript (except for simple validation code)

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to use this function:
    Code:
    function hideShow(el_id) {
    var x = document.getElementById(el_id)
    for (var i = 1; i < 4; i++) {
    	if (document.getElementById('row'+i)) 
    		document.getElementById('row'+i).style.display = 'none';
    	}
    if (x) x.style.display = 'block';
    }
    But I'm afraid that if you're not using divs for textareas to show-hide, your table will be messed up. Try it. Then maybe better to use 'visibility' instead 'display'...

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, don't set them to display:block. <tbody>s are only display:block by default in IE which doesn't support the correct default value for <tbody>s and other table related elements. Setting them to display:block will cause problems in other browsers. Simply set the value of the property to an empty string.

    No, the visibility property won't help, since it will not collapse the space occupied by the invisible element(s).

    Check these out:
    Swapping Displayed Elements
    Hiding and Unhiding Table Rows
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Bosko and Kravvitz.

    It works. Also, I am not worrying about the browser compatabilities as it has to run on intratnet where the users use IE.

    Bosko, It works perfectly fine except that, I want to Hide and Unhide it on clicking the link. When I use your function, it shows the boxes but does not hide, when I click the link again. But yes, when I click any other link, the textboxes pertaining to only that link is shown ( so this problem is solved). I will really appreciate, if you solve the hiding/unhiding problem for me too!

    Thanks

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is:
    Code:
    function hideShow(el_id) {
    var el = document.getElementById(el_id);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    for (var i = 1; i < 3; i++) {
    	document.getElementById('row'+i).style.display = 'none';
    	}
    el.style.display = '';
    }
    }
    It's a combination of 'your' and 'mine' function.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing:
    in HTML add 'return false' after onclick function and also wrap i.e. row1 like this ('row1')
    Code:
    <a href="#" onclick="hideShow('row3'); return false;">

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks bosko. Works like a charm.

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bosko,

    Please help me with one more thing with the same hinding/unhiding stuff.

    Can I change the look and feel of the link, which the user clicks. Say, I want to change the font of the link..basically something so that the user knows, that this link has been clicked.

    Thanks,
    Sid

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much!


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
  •