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 #222

Is there a way to hide a Tap Panel Magic 1 (TPM) tab button if there is no associated content, or if there is no content of specific html tag type?

The Answer

Prepared Oct. 2007 by Gerry Jacobsen, PVII

Note: The Tab Panel Magic 1 system has been retired.
The newer Tab Panel Magic 2 system has a similar solution, see tech note #301 for details. Upgrade pricing from TPM1 is available.

You can conditionally display a particular tab button in TabPanel Magic 1, 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. Copy and Paste this new JavaScript function to the end of your p7tpscripts.js file, then save and close the file:

function P7_TPcd(d,tg){
   var g,tc,tb=document.getElementById(d);
   if(tb){
    tc=document.getElementById(d.replace("b","c"));
    if(tc){
     g=tc.getElementsByTagName(tg);
    }
    if(!tc || !g || g.length<1){
     tb.style.display='none';
    }
   }
 }

2. Open your html page that contains the TabPanel. In Code View, look for the <body> tag, it will look something like this:

<body onload="P7_initTP(7,0)">  

3. Add this function call to the <body> onload event:

;P7_TPcd('p7tpb1_3','IMG') 

so it now looks like this:

<body onload="P7_initTP(7,0);P7_TPcd('p7tpb1_3','IMG')">  

The function contains two arguments:

'p7tpb1_3' is the id of the Tab Button div that you wish to conditionally show. In this example it would be the 3rd button.

'IMG' is the html tag to look for in the corresponding content panel. If the system finds an occurrence of this tag ( in this example, and image tag) then the Tab Button will show, otherwise it will be hidden. This can be any valid html tag. The tag name must be in caps.

That's it!

Back to the questions list