Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #301

Is there a way to conditionally hide a Tab Panel Magic 2 (TPM2) tab button if there is no associated content, or if there is no content of specific html tag type?

The Answer

Prepared Jan. 2011 by Gerry Jacobsen, PVII

You can conditionally display a particular tab button in Tab Panel Magic 2, depending on whether the tab button's associated content panel is empty, or if it does not contain a specified html markup tag. For example, you can hide the tab button if the associated content panel does not contain an image (the IMG tag).

Here's how:

1. Open the p7TPMscripts.js file, scroll to the end and hit the Enter key to make a new line. Copy and Paste this new function into that new line:

function P7_TPMcd(){
   var i,g=[],m=true,t,tg=false,tC,tA=document.getElementById(arguments[0]);
   if(tA){
     tC=document.getElementById(arguments[0].replace("tab", "c"));
     if(tC){
       for(i=1;i<arguments.length;i++){
         t=tC.getElementsByTagName(arguments[i]);
         if(arguments[i]=='*'){
            tg=true;
         }
         if(t&&t.length&&t.length>0){
           g=g.concat(t);
         }
       }
     }
     if(!tC||(!tg&&(!g||g.length<1))||(tg&&!/\S/.test(tC.innerHTML))) {
       m=false;
       tA.style.display='none';
       if(tC){
         tC.parentNode.style.display='none';
       }
     }
  }
  return m;
}

2. Now locate this code block in the P7_initTPM() function, around line 155:

   tA=tU.getElementsByTagName('A');
   for(i=0;i<tA.length;i++){

3. Make a new line right after the first line and then Copy and Paste this entire new code block into the new line:

   tP=tU.getElementsByTagName('A');
   tA=[];
   for(var z=0;z<tP.length;z++){
     if(P7_TPMcd(tP[z].id,'*')){
       tA.push(tP[z]);
     }
   }
   if(tA.length<1){
     tB.style.display='none';
     continue;
   }

so it now looks like this:

   tA=tU.getElementsByTagName('A');
   tP=tU.getElementsByTagName('A');
   tA=[];
   for(var z=0;z<tP.length;z++){
     if(P7_TPMcd(tP[z].id,'*')){
       tA.push(tP[z]);
     }
   }
   if(tA.length<1){
     tB.style.display='none';
     continue;
   }
   for(i=0;i<tA.length;i++){

Setting the filter option:

The filter is set by the arguments in this line: if(P7_TPMcd(tP[z].id,'*')){

The text inside the two single quotes. '*', defines the conditional display criteria.

4. Save and close the file.

That's it!

Back to the questions list