Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1301
  • Last Modified:

Collapsing and expanding iframes on click of a link!

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
JitenNikhil
Asked:
JitenNikhil
  • 3
  • 2
1 Solution
 
daohailamCommented:
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
 
JitenNikhilAuthor Commented:
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
 
JitenNikhilAuthor Commented:
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
 
daohailamCommented:
Missing a '}' at the end of CollapseAll() => script error (?!)
0
 
JitenNikhilAuthor Commented:
thanks Daohailam!
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!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now