SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add multiple values for one button

    I'm attempting to add a "show" button that, when pressed, will open a table. The thing is, I want the SAME button's value to change from "Show" to "Hide" after the button is pressed and the table is revealed.

    This is what I have so far:

    <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="expandit(this);">

    How do I include a "Hide" value on the same button?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick little demo.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <script type='text/javascript'>
    
    window.onload = function()
    {
      setupTableShowHide();
    }
    
    /* Assumes button/table pairs have IDs:
       'button1' and 'table1',
       'button2' and 'table2', etc.
    */
    function setupTableShowHide()
    {
      var i = 1, b;
      do {
        b = document.getElementById('button' + i);
        if (b) {
          b.onclick = shBtnOnClick;
          b.idNumber = i++;
          b.isVisible = true;
        }
      } while (b);
    }
    
    function shBtnOnClick()
    {
      var bv, d, t = document.getElementById('table' + this.idNumber);
      if (!t) return;
      if (this.isVisible) {
        d = 'none';
        bv = 'Show';
      }
      else {
        d = 'block';
        bv = 'Hide';
      }
      t.style.display = d;
      this.value = bv + ' Table ' + this.idNumber;
      this.isVisible = !this.isVisible;
    }
    </script>
    </head>
    <body>
    
    <table id='table1' width='300'>
      <caption>Table 1</caption>
      <thead>
        <tr><th>Col 0</th><th>Col 1</th></tr>
      </thead>
      <tbody>
        <tr><td>[Row0, Col0]</td><td>[Row0, Col1]</td></tr>
        <tr><td>[Row1, Col0]</td><td>[Row1, Col1]</td></tr>
        <tr><td>[Row2, Col0]</td><td>[Row2, Col1]</td></tr>
        <tr><td>[Row3, Col0]</td><td>[Row3, Col1]</td></tr>
      </tbody>
    </table>
    
    <form>
      <input id='button1' type='button' value='Hide Table 1'>
    </form>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function expandit(button)
    {
       button.value = 
               (button.value == "Show")? button.value="Hide" : button.value= "Show";
    }

  4. #4
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A bit overwhelmed and confused, but can you tell me how I can include that code into the following function:

    Code:
    <div class='panel'><b>Spoiler:</b> <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="expandit(this);"><script>document.write("<div style=\'display:none;\'>");</script><noscript><div></noscript><br><table class='vbmenu_popup'><tr><td>&nbsp;&nbsp;<td>{param}</td><td>&nbsp;&nbsp;</td></tr></table><br></div></div>

    It's for a vBulletin function. It gets inserted in the "Replacement" window for BB code.


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
  •