SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide function

    Hi,

    I have been using this function for a while and it has served well, however, I need some modifications to it and when it comes to Javascript I don't have a clue .

    This function basically hides a div when the link is clicked:

    HTML Code:
    <div>
    <a href="#" onclick="show_comment('4');return false;">Hide</a>
    <h2>Custom Keywords</h2>
    <div style="display:block;" id="4"> 
    This is the JS function:

    HTML Code:
    function show_comment(id) {
     menu = document.getElementById(id);
     if(menu.style.display == "block"){
      menu.style.display = "none";
     } else {
      menu.style.display = "block";
     }
    } //end function show_comment()
    I would like the function to change the link text from 'Hide' to show when the div is in a hidden state and when the div is visible keep the text as hide.

    Does anyone know how I can modify this function to do this?

    Thanks,

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick and dirty fix:
    Code:
    <div>
    <a href="#" onclick="show_comment(this,'4');return false;">Hide</a>
    <h2>Custom Keywords</h2>
    <div style="display:block;" id="4">
    Code:
    function show_comment(link,id) {
     menu = document.getElementById(id);
     if(menu.style.display == "block"){
      menu.style.display = "none";
      link.innerHTML = "Show";
     } else {
      menu.style.display = "block";
      link.innerHTML = "Hide";
     }
    } //end function show_comment()

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a sexy script =P.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jimfraser, thanks for your reply. What exactly is this doing?

    In the show_comment function you are passing "this" - what is "this" doing?

    And
    PHP Code:
    link.innerHTML "Show"
    , is this basically saying change to the text of the anchor text, innerHTML being what is included between the <a></a> tags? And "link" is referencing the <a> tag?

    Thanks again.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you pass [this] as a parameter to an event handler, it means [the object that called the handler]. In this case it's the <a> tag.

    I receive [this] as the parameter [link], to which I change the innerHTML (the HTML that is inside the tag, exactly as you thought).

  6. #6
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit more functionality needed now. I have several tables which have the above functionality in them; tables contain a lot of data.

    How would I go about implementing a javascript function to show all tables and hide all tables as once; this will save the individual manually expanding/collapsing each table?

    Thanks

  7. #7
    SitePoint Addict KJedi's Avatar
    Join Date
    Sep 2005
    Location
    Ukraine, Nikolaev
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can pass an array of IDs...
    Or you can create global array of tables to show/hide.

  8. #8
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KJedi View Post
    You can pass an array of IDs...
    Or you can create global array of tables to show/hide.
    My knowledge of Javascript is very limited. How do I pass an array, loop over it and change the style of these id's to display or none depending on their current status?

  9. #9
    SitePoint Addict KJedi's Avatar
    Join Date
    Sep 2005
    Location
    Ukraine, Nikolaev
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Passing an array:
    Code HTML4Strict:
    <div>
    <a href="#" onclick="show_comment(this,[B]['el1', 'el2', 'el3'][/B]);return false;">Hide</a>
    <h2>Custom Keywords</h2>
    <div style="display:block;" id="4">

    Processing:
    Code JavaScript:
    function show_comments(el, arr)
    {
       if (arr.length > 0)
       {
         el.innerHTML = ((document.getElementById(arr[0]).style.display == 'block') ? 'Show' : 'Hide');
         for (var i = 0; i < arr.length; i++)
         {
            showHideEl(arr[i]);
         }
       }
    }
     
    function showHideEl(el)
    {
       if (typeof el == 'string')
          el = document.getElementById(el);
       el.style.display = ((el.style.display == 'block') ? 'none' : 'block');
    }

    I din't run this code, it should work, but may contain some minor syntax errors.
    How ir works. You call function show_comments(), pass link to the current element (which initiated an event) and array of elements to change state. Then you check if that array is not empty, change innerHTML of the element <a> (depending on the state of the first element in array) and then loop through all array and call function showHideEl.
    It takes 1 parameter which can be element link or a string. If it is a string (like in our case), it gets element link for it and then changes state.

    That's all. Simple and effective.

    One disadvantage. if you have 2 elements, one is hiddent and other is visible, this approach will affect both and visible will be hidden and hidden will appear. So they flip states.

    If it is undesirable, then you can write something like:
    Code JavaScript:
    var state = false;
    in the beginning of the page and change functions in the following way:

    Code JavaScript:
    function show_comments(el, arr)
    {
       if (arr.length > 0)
       {
         el.innerHTML = (State) ? 'Show' : 'Hide');
         for (var i = 0; i < arr.length; i++)
         {
            showHideEl(arr[i]);
         }
       }
       State = !State;
    }
     
    function showHideEl(el)
    {
       if (typeof el == 'string')
          el = document.getElementById(el);
       el.style.display = (State ? 'block' : 'none');
    }

    This should work too, but I didn't test it.

    Good luck

  10. #10
    SitePoint Addict KJedi's Avatar
    Join Date
    Sep 2005
    Location
    Ukraine, Nikolaev
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick note. Don't use IDs thatbegin with digit. This should be like variable name - first is letter or _, after that any digits or letters or _. digits on the first place also work, but that is not "best practice"

  11. #11
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant - works superb, just what I was after.

    I've been trying to expand the script a little by having the function change each of the div's innerHTML to display the correct link text. For example, if the Show All link is pressed, this will show all the divs. But their individual show/hide feature doesn't correlate to the way it is being displayed.

    Does this make sense?


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
  •