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!

Register Log in
  • Congratulations strongm 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

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>
 
Sort by date Sort by votes
default to a collapsed view instead of expanded
Click to expand...

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
 
Upvote 0 Downvote
Set it as such in the CSS
Click to expand...
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 ^...
 
Upvote 0 Downvote
1) default to a collapsed view instead of expanded
2) exchange the plus.gif image for minus.gif as appropriate
Click to expand...

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
 
Upvote 0 Downvote
Code: 
<tr style="display:none;">test</tr>
Click to expand...
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



 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
Click to expand...

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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
293
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
299
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
267
coldbohemia
coldbohemia
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
630
ggriffit
ggriffit
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
259
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top