Help with Tab Content script

It works! Thank you very much.
The only thing I do differently is to remove:
display:block!important
This will allow user to print content on active tab only.

I appriciate all you help to solve this problem.

I do hope someone can look into this feature:
http://www.dynamicdrive.com/forums/s...ad.php?t=11363

I tried it and it does not work. it causes the content of other tabs to disappear.

Quote:

---

Originally Posted by iwdynamic

It works! Thank you very much.

I do hope someone can look into this feature:
http://www.dynamicdrive.com/forums/s...ad.php?t=11363

I tried it and it does not work. it causes the content of other tabs to disappear.

---

You're welcome. About that other feature, I tried it too and couldn't make it work either. I think that it wasn't explained very well, how to use it, or it just doesn't work. Here is an easier method - add this function to the end of the tabcontent.js file:

Code:

---

function revealAll(){
var tabs=document.getElementsByTagName('div');
for (var i_tem = 0; i_tem < tabs.length; i_tem++)
if (tabs[i_tem].className=='tabcontent')
tabs[i_tem].style.display='block';
}

---

Then you can use a tab like so:

Code:

---

<li><a href="#" onclick="revealAll();return false;">Show All</a></li>

---

The function works on my page with one tab content. Can you modify it so i will work on a page with multiple tab contents?
Thank you!

Quote:

---

Originally Posted by iwdynamic

The function works on my page with one tab content. Can you modify it so i will work on a page with multiple tab contents?
Thank you!

---

Well, there are two directions you could go with that. Do you want one link that will reveal all tabs on a page regardless of what tab content group that they are a part of? Or, do you want separate links, each one revealing only all of the tabs in the group with which it is associated?

I think that for the first way it should work 'as is'. As long as all content divisions have the class 'tabcontent' (they are supposed to, according to the demo page).

For the second way, a unique identifier would have to be found for each group and the revealAll() function could test for that. For example, the id of each tabcontent division could be used as a secondary test if all tabcontent divisions in a given group shared an identical unique component. Say the divs were id'ed:

HTML Code:

---

<div id="first_tcontent1" class="tabcontent">

</div>

<div id="first_tcontent2" class="tabcontent">

</div>

---

and so on and the second group could be:

HTML Code:

---

<div id="sec_tcontent1" class="tabcontent">

</div>

<div id="sec_tcontent2" class="tabcontent">

</div>

---

Then the revealAll() function could look like so:

Code:

---

function revealAll(str){
var tabs=document.getElementsByTagName('div');
for (var i_tem = 0; i_tem < tabs.length; i_tem++)
if (tabs[i_tem].className=='tabcontent'&&tabs[i_tem].id.indexOf(str)>-1)
tabs[i_tem].style.display='block';
}

---

And could be called these two ways, for the two types of content divs I've already outlined:

HTML Code:

---

<li><a href="#" onclick="revealAll('first');return false;">Show All</a></li>

---

and:

HTML Code:

---

<li><a href="#" onclick="revealAll('sec');return false;">Show All</a></li>

---

Thanks John for the function.
My page is setup so that revealAll() function is for each group.

One minor detail:
How do I get the "Show All" tab change to "selected"/active when the tab is clicked? I tried to modify the code myself with no luck.

Thank you

To do that, we will need to borrow a little code from the expandcontent() function and add it to our revealAll() function like so:

Code:

---

function revealAll(str, linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i<ullist.length; i++)
ullist[i].className=""
linkobj.parentNode.className="selected"  //highlight currently clicked on tab
var tabs=document.getElementsByTagName('div');
for (var i_tem = 0; i_tem < tabs.length; i_tem++)
if (tabs[i_tem].className=='tabcontent'&&tabs[i_tem].id.indexOf(str)>-1)
tabs[i_tem].style.display='block';
}

---

Now we will need to pass a little more information to revealAll() when we use it, like so (I'll show the two previous examples):

HTML Code:

---

<li><a href="#" onclick="revealAll('first', this);return false;">Show All</a></li>

---

and:

HTML Code:

---

<li><a href="#" onclick="revealAll('sec', this);return false;">Show All</a></li>

---

That does it.
Thank you very much John, You've been very helpful. It's much appricaited.