Solved

Collapsing and expanding iframes on click of a link!

Posted on 2006-10-30
5
1,287 Views
Last Modified: 2012-08-14
Hi!
I am using a 'Master.jsp' that uses "iframes".
I also have a code, that expands or collapses the iframes when the + button is clicked!
The code run as:
<tr>
<td width="100%" id="block1" class="sectionOpen" onClick="ShowHide('block1','employeeInfoTab','<%=request.getContextPath()%>/jsp/resume/ShowEmployee.do','employeeInfoFrame')" >employee info</td>
</tr>
<tr style="display: '';" id="employeeInfoTab"><td width="100%">
<iframe src="<%=request.getContextPath()%>/jsp/resume/ShowEmployee.do" name="employeeInfoFrame" width="100%" height="520">
</iframe>
</td>
</tr>

The problem is that I have a EXPANDALL and COLLAPSEALL link in the header file!
If I click on this I want all the pages(iframes) to collapse or expand! How do I achieve this!

Pls guide!
JitenNikhil
0
Comment
Question by:JitenNikhil
  • 3
  • 2
5 Comments
 
LVL 5

Accepted Solution

by:
daohailam earned 150 total points
ID: 17835100
Like this:

<html>
<head>
<script>
function ShowHide(tab) {
      var t = document.getElementById(tab);
      if (t.style.display == '') {
            t.style.display = 'none';
            t.style.visibility = 'hidden';
      }
      else {
            t.style.display = '';
            t.style.visibility = 'visible';
      }
}

function ShowAll() {
      var t = document.getElementById('info');
      for (var i = 0; i < t.rows.length; i++) {
            if (t.rows[i].id != "control") {
                  t.rows[i].style.display = '';
                  t.rows[i].style.visibility = 'visible';
            }
      }
}

function CollapseAll() {
      var t = document.getElementById('info');
      for (var i = 0; i < t.rows.length; i++) {
            if (t.rows[i].id != "control") {
                  t.rows[i].style.display = 'none';
                  t.rows[i].style.visibility = 'hidden';
            }
      }
}
</script>
</head>
<body>
<a href="javascript:ShowAll()">Show all</a>&nbsp;<a href="javascript:CollapseAll()">Collapse all</a></br>
<table id="info">
<tr id="control">
<td width="100%" id="block1" class="sectionOpen" onClick="ShowHide('EETab')">Expert Exchange info</td>
</tr>
<tr id="EETab">
<td width="100%">
<iframe src="http://www.experts-exchange.com" name="eeInfoFrame" width="100%" height="520">
</iframe>
</td>
</tr>
<tr id="control">
<td width="100%" id="block2" class="sectionOpen" onClick="ShowHide('GTab')">Google info</td>
</tr>
<tr id="GTab">
<td width="100%">
<iframe src="http://google.com" name="gInfoFrame" width="100%" height="520">
</iframe>
</td>
</tr>
</table>
</body>
</html>
0
 

Author Comment

by:JitenNikhil
ID: 17840214
Hi!
I am having this code inside the Header.jsp!
<a href="javascript:ShowAll()">Show all</a>&nbsp;<a href="javascript:CollapseAll()">Collapse all</a></br>

So even though I make the changes it does not work!
0
 

Author Comment

by:JitenNikhil
ID: 17840232
My Master.jsp looks like:
<body>
 <table id="info" width="100%">
  <tr id="header">
   <td width="100%">
     <iframe height="100" src="header.jsp" width="100%"></iframe>
   </td>
  </tr>
 <%if(request.isUserInRole("resume_admin")){%>
        <tr id="control">
          <td width="100%" id="block1" class="sectionOpen" onClick="ShowHide('block1','searchInfoTab')" >Search</td>
        </tr>
        <tr style="display: '';" id="searchInfoTab">
           <td width="100%">
               <iframe src="<%=request.getContextPath()%>/jsp/resume/ShowSearchPage.do" width="100%" height="520">
               </iframe>
  </td>
</tr>

and my header.jsp looks like:
<script>
function CollapseAll() {
     var t = document.getElementById('info');
     for (var i = 0; i < t.rows.length; i++) {
          if (t.rows[i].id != "control") {
               t.rows[i].style.display = 'none';
               t.rows[i].style.visibility = 'hidden';              
          }
     }
</script>
<td width="50%" class="logo"><div align="center"><a href="#">EXPAND ALL</a> | <a href="CollapseAll()">COLLAPSE ALL</a> </div>
0
 
LVL 5

Expert Comment

by:daohailam
ID: 17847951
Missing a '}' at the end of CollapseAll() => script error (?!)
0
 

Author Comment

by:JitenNikhil
ID: 17879202
thanks Daohailam!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now