SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,210
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    fold and spread function without any images

    Code:
    <script type=text/javascript>
    
    function foldGroup(menuId)
    {
      var objTableFoldGroup = document.getElementById('foldTable_'+menuId);
      var objImgClose = document.getElementById('foldClose_'+menuId);
      var objImgOpen = document.getElementById('foldOpen_'+menuId);
      if(objImgClose.style.display != "none") 
      {
        objTableFoldGroup.style.display = '';
        objImgClose.style.display = 'none';
        objImgOpen.style.display = '';
      }
      else
      {
        objTableFoldGroup.style.display = 'none';
        objImgClose.style.display = '';
        objImgOpen.style.display = 'none';
      }
    }
    </script>
    
    
    <a href="javascript:foldGroup('1')" class='bold'>fold1</a>
    
    <img id='foldClose_1' src='up.gif'>
    <img id='foldOpen_1' style='display:none;' src='down.gif'> 
    
    <table id='foldTable_1' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <br>
    
    <a href="javascript:foldGroup('2')" class='bold'>fold2</a>
    
    <img id='foldClose_2' src='up.gif'>
    <img id='foldOpen_2' style='display:none;' src='down.gif'> 
    
    <table id='foldTable_2' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    The code above can fold and spread the target table.

    The code above includes two images.

    I like to make the fold and spread function without any images.

    Can I make it with your help?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type=text/javascript>
    
    function foldGroup(menuId)
    {
      var objTableFoldGroup = document.getElementById('foldTable_'+menuId);
      if(objTableFoldGroup.style.display == 'block' || objTableFoldGroup.style.display == '') 
      {
    	objTableFoldGroup.style.display = 'none';
      }
      else
      {
    	objTableFoldGroup.style.display = 'block';
      }
    }
    </script>
    
    
    <a href="javascript:foldGroup('1')" class='bold'>fold1</a>
    
    <table id='foldTable_1' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <br>
    
    <a href="javascript:foldGroup('2')" class='bold'>fold2</a>
    
    <table id='foldTable_2' cellpadding='0' cellspacing='0' border='0'  style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>


  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,210
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, gRoberts.


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
  •