Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table expand collapse < default collapse 1

Status
Not open for further replies.

admoore

IS-IT--Management
May 17, 2002
224
US
I am using code as below to expand & collapse table rows...
I wish to:
1) default to a collapsed view instead of expanded
2) exchange the plus.gif image for minus.gif as appropriate

TIA,

-Allen M.

Code:
<html>
<head>
<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}
</script>   
</head>
<body>
<table id="thread_1" border="1" width="200">
   <tr class="headerRow">
      <th><a href="#" onclick="toggleDisplay(document.getElementById('thread_1'))" ><IMG SRC="./images/plus.gif"></a>< click</th>
      <th colspan = "2">thread 1</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test2</td>
      <td>test2</td>
      <td>test2</td>
   </tr>
   <tr>
      <td>test3</td>
      <td>test3</td>
      <td>test3</td>
   </tr>
   <tr>
      <td>test4</td>
      <td>test4</td>
      <td>test4</td>
   </tr>
</table>

<table id="thread_2" border="1" width="200">
   <tr class="headerRow">
      <th><a href="#" onclick="toggleDisplay(document.getElementById('thread_2'))" ><IMG SRC="./images/plus.gif"></a>< click</th>
      <th colspan = "2">thread 2</th>
   </tr>
   <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
   </tr>
   <tr>
      <td>test2</td>
      <td>test2</td>
      <td>test2</td>
   </tr>
   <tr>
      <td>test3</td>
      <td>test3</td>
      <td>test3</td>
   </tr>
</table>

</body></html>
 
default to a collapsed view instead of expanded

Set it as such in the CSS.

Change src attribute to whatever you want it to be.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Set it as such in the CSS
Sadly, I am CSS / JavaScript challenged database guy...
Code:
<table id="thread_1" border="1" width="200" style="rowVisible:false;">
^ does not appear to help ^...
 
1) default to a collapsed view instead of expanded
2) exchange the plus.gif image for minus.gif as appropriate

1. Set the rows CSS property display to none to start.

Code:
 <tr style="display:none;">test</tr>

2. Get the image object and change its source property.

Code:
function toggleDisplay(tbl,[COLOR=#A40000][b]linkObj[/b][/color]) {
var imgObj = linkObj.getElementById('expand1');
if(imgObj.src=="./images/plus.gif")
{
 imgObj.src="./images/minus.gif";
}
else
{
 imgObj.src="./images/plus.gif";
}
...



onclick="toggleDisplay(document.getElementById('thread_2',[COLOR=#A40000][b]this[/b][/color])

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Code:
<tr style="display:none;">test</tr>
Perfect- thanks!

I am having an issue adapting the toggle of images from plus to minus however...
The elementID i.e. 'thread_1', 'thread_2', ett increments automatically via php and a large number of threads are possible



 
My preferred way of toggling plus / minus is using JQuery and toggling a class

Code:
<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function toggle(obj){
    if(obj.hasClass('plus'))
    {
        
        obj.removeClass('plus').addClass('minus'); 
    }
    else
    {
        obj.removeClass('minus').addClass('plus'); 
    }
}
</script>
<style type="text/css">
.plus {
    background-image:url('plus.png');
    background-repeat: no-repeat;   
    background-position:center center; 
    width:20px !important;  
    cursor:pointer;          
 }
 
.minus {
    background-image:url('minus.png');
    background-repeat: no-repeat;
    background-position:center center;      
    width:20px !important; 
    cursor:pointer;       
 } 

</style>
</head>
<body>
<p>
<table>
<tr><td class="plus" onclick="toggle($(this));" title="click to toggle image"></td><td>some info</td></tr>
<tr><td class="plus" onclick="toggle($(this));" title="click to toggle image"></td><td>some more stuff</td></tr>
</table>
</p>
<p>Click the image to show how the toggle class work</p>
</body>
</html>

Take it for a spin via :

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads
 
I am having an issue adapting the toggle of images from plus to minus however...
The elementID i.e. 'thread_1', 'thread_2', ett increments automatically via php and a large number of threads are possible

Which is why I used the keyword "this". Based on your example each table will have its own plus/minus sign, so all I do is get a reference to the link being activated, and find the image inside that link. That way it doesn't matter if you have 3 or 100 of these, each one can be identified through the link.

Code:
<a href="#" onclick="toggleDisplay(document.getElementById('thread_1'),[b][COLOR=#A40000]this[/color][/b])" ><IMG SRC="./images/plus.gif"></a>

this becomes a reference to the href element in the form of the linkObj variable inside your function. You can then simply find the one and only image inside that link and change its source. If the HTML is not the same as your example then some adjustments would need to be made, but it will depend on the HTML.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top