Solved

Hide onload and show onclick

Posted on 2004-10-05
8
244 Views
Last Modified: 2010-05-18
Hi guys

I found a great efect but i am unable to impement it in the way that i have found it.

I found this page http://isohunt.com/torrents.php?ihq=route&ext=&op=and when you click on one of the results a tabe slildes open undernether the select result and yu get to see more infomation on your selected result. well i this example it is achally opening a Iframe which i dont really want to do.

I want to be able just view a table. the thinig is i can grab their JS files so i am stuck for code, any idea or examples of how i could recreate this effect?

willa
0
Comment
Question by:willa666
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 1

Expert Comment

by:sunmaster
ID: 12225291
Hi,
Try this,

<html>
<script laguage="javascript">
function hideShowSect(obj){
    if(obj.style.display == ''){
        obj.style.display = 'none';
    }else{
        obj.style.display = '';
    }
}
</script>
  <body>
    <table>
      <tr>
        <td>header 1</td>
        <td onclick="hideShowSect(section1)">header 2</td>
        <td>header 3</td>
      </tr>
      <tr id="section1">
        <td>
          <table>
            <tr>
              <td>item 1</td>
            </tr>
            <tr>
              <td>item 2</td>
            </tr>
          </table>
      </tr>
    </table>
  </body>
</html>

you can hide and show any item. But without any sliding effect. For sliding effect you will need to use CSS transition effect.

regards,
sunmaster
0
 
LVL 1

Author Comment

by:willa666
ID: 12225420
Sunmaster

I have adapted the script into this but if i try to apply the hide/show function to more then one row, i tried to add the id="section1" to more then one row but the script does not run. :(

Any ideas? I thought about having a table inside the row/cell but this is not an option. GRR

Here is the code

<html>
<script laguage="javascript">
function hideShowSect(obj){
    if(obj.style.display == ''){
        obj.style.display = 'none';
    }else{
        obj.style.display = '';
    }
}
</script>
  <body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr   >
    <td onclick="hideShowSect(section1)" bgcolor="#6699CC">USERNAME</td>
    <td bgcolor="#6699CC">WILLA666</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="section1">
    <td bgcolor="#CC99FF">ROW 1</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr
    <td bgcolor="#CC99FF">ROW 2</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#CC99FF">ROW 3</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

0
 
LVL 1

Expert Comment

by:sunmaster
ID: 12233188
hi willa,

  try putting your tables in this way,

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td onclick="hideShowSect(section1)" bgcolor="#6699CC">USERNAME</td>
    <td bgcolor="#6699CC">WILLA666</td>
    <td>&nbsp;</td>
  </tr>
    <tr id="section1">
        <td>
          <table>  <!--content for first section-->
              <tr >
                  <td bgcolor="#CC99FF">ROW 1</td>
                  <td bgcolor="#CC99FF">&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td bgcolor="#CC99FF">ROW 2</td>
                  <td bgcolor="#CC99FF">&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td bgcolor="#CC99FF">ROW 3</td>
                  <td bgcolor="#CC99FF">&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
          </table>
        </td>
     </tr>
     <tr>
       <td onclick="hideShowSect(section2)" bgcolor="#6699CC">Section 2</td>
       <td bgcolor="#6699CC">section 2 description....</td>
       <td>&nbsp;</td>
     </tr>
       <tr id="section2">
           <td>
             <table>  <!--content for second section-->
                 <tr >
                     <td bgcolor="#CC99FF">ROW 1</td>
                     <td bgcolor="#CC99FF">&nbsp;</td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td bgcolor="#CC99FF">ROW 2</td>
                     <td bgcolor="#CC99FF">&nbsp;</td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td bgcolor="#CC99FF">ROW 3</td>
                     <td bgcolor="#CC99FF">&nbsp;</td>
                     <td>&nbsp;</td>
                   </tr>
             </table>
           </td>
        </tr>
.... ....
</table>


Try putting all your contents for the section in at table within a cell, like what is show up there. FYI, id must be unique. you cannot name the id as the same more than once in a HTML page.

But if you don't want to put a table within a cell you may want to try this,

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr   >
    <td onclick="hideShowSect(part1);hideShowSect(part2);hideShowSect(part3);"
                     bgcolor="#6699CC">  USERNAME</td>
    <td bgcolor="#6699CC">WILLA666</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="part1">
    <td bgcolor="#CC99FF">ROW 1</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="part2">
    <td bgcolor="#CC99FF">ROW 2</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="part3">
    <td bgcolor="#CC99FF">ROW 3</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

happy trying ;-)



regards,
sunmaster
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:willa666
ID: 12235287
Thats great, Ok i will have  hack at it now.

one last thing tht i was hink is that i really want the cells to be hidden onload and then shown if the header is selected. how can i do this?



0
 
LVL 3

Expert Comment

by:hemebond
ID: 12245838
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21156125</title>
            <!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
      </head>
      <body>
            <table>
                  <thead>
                        <tr>
                              <th>text</th>
                        </tr>
                  </thead>
                  <tfoot></tfoot>
                  <tbody>
                        <tr>
                              <td>text</td>
                        </tr>
                  </tbody>
            </table>
      </body>
      <script type="text/javascript">
            var thead = document.getElementsByTagName("thead");
            for(var i = 0; i < list.length; i++)
            {
                  if(window.ie)
                  {
                        thead[i].onclick = toggle;
                  }
                  else
                  {
                        thead[i].addEventListener('click',toggle,true);
                  }
                  thead[i].parentNode.getElementsByTagName('tbody')[0].style.display = 'none';
            }

            function toggle(e)
            {
                  var tbody = e.currentTarget.parentNode.getElementsByTagName('tbody')[0];
                  tbody.style.display = (tbody.style.display == 'none') ? '' : 'none';
            }
      </script>
</html>
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12245852
Sorry, this will work in IE too:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21156125</title>
            <!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
      </head>
      <body>
            <table>
                  <thead>
                        <tr>
                              <th>text</th>
                        </tr>
                  </thead>
                  <tfoot></tfoot>
                  <tbody>
                        <tr>
                              <td>text</td>
                        </tr>
                  </tbody>
            </table>
      </body>
      <script type="text/javascript">
            var list = document.getElementsByTagName('thead');
            for(var i = 0; i < list.length; i++)
            {
                  if(window.ie)
                  {
                        list[i].onclick = toggle;
                  }
                  else
                  {
                        list[i].addEventListener('click',toggle,true);
                  }
                  list[i].parentNode.getElementsByTagName('tbody')[0].style.display = 'none';
            }

            function toggle(e)
            {
                  var tbody = (window.ie) ? this.parentNode.getElementsByTagName('tbody')[0] : e.currentTarget.parentNode.getElementsByTagName('tbody')[0];
                  tbody.style.display = (tbody.style.display == 'none') ? '' : 'none';
            }
      </script>
</html>
0
 
LVL 1

Accepted Solution

by:
sunmaster earned 500 total points
ID: 12246064
hi willa666,

you can putting something like this,
...
 <tr id="part2" style='display:none'>
    <td bgcolor="#CC99FF">ROW 2</td>
    <td bgcolor="#CC99FF">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
...

or you can call the function during onload something like this

<body onload='hideShowSect(part1)'>

see which one suits you...

happy coding,

regards,
sunmaster
0
 
LVL 1

Expert Comment

by:sunmaster
ID: 12343669
Thanks a lot.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question