Tab Content Script - Hide Tabs

[dclark22]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: I have a button at the top of the page that says "Hide Admin Area". When this is selected I want it to hide the tabs and the contents. Since the code is designed to display the currently selected tab when the page is refreshed or reopened, it hides the other tabs but still displays the last one selected. I don't want to remove that code because I do want it to keep that tab selected if the screen is refreshed. However I need to change it so that it hides it when that button is selected and show it again when the "Show Admin Area" button is selected.

I also have a drop down box in several of the contents areas and the drop down box also remains visible when they click on the "Hide Admin Area" and I don't want it to.

Here is the code I am using to hide and show the tab list and tab contents:

<style type="text/css">
<!--
.admin {color:#000033; background-color:#E9E1BD; layer-background-
color:#E9E1BD;position:absolute; top:80px; left:220px; width:680px;
height:480px;z-index:0; visibility:hidden;}
.admin_btn { position:absolute; top:61px; left:380px; width:120px;
z-index:0; visibility:hidden;}
.admin_btn_show { position:absolute; top:61px; left:380px; width:120px;
z-index:0;}
-->
</style>

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
// -->
</script>

<input class="admin_btn" type="button" onClick="toggleBox('admindiv',0);document.getElementById('admin_hide_btn').style.visibility = 'hidden';document.getElementById('admin_show_btn').style.visibility = 'visible';" value="Show Admin Area" id="admin_hide_btn" style="position: absolute; left: 411; top: 27">

<input class="admin_btn_show" type="button" onClick="toggleBox('admindiv',1);document.getElementById('admin_show_btn').style.visibility = 'hidden';document.getElementById('admin_hide_btn').style.visibility = 'visible';" value="Hide Admin Area" id="admin_show_btn" style="position: absolute; left: 411; top: 27">

<div ID="admindiv" class="admin">
<ul id="tablist" class="current">
<li class="selected"><a href="#" rel="sc1">Create Folders</a></li>
<li><a href="#" rel="sc2">Add Files</a></li>
<li><a href="#" rel="sc3">Delete Files</a></li>
<li><a href="#" rel="sc4">Delete Folders</a></li>
<li><a href="#" rel="sc5">User/Password Admin</a></li>
</ul>

<div class="tabcontentstyle" style="width: 515px; height: 23px">

<div id="sc1" class="tabcontent">
<!--#include file="tabs/create_folders.asp"-->
</div>

<div id="sc2" class="tabcontent">
<!--#include file="tabs/add_files.asp"-->
</div>

<div id="sc3" class="tabcontent">
<!--#include file="tabs/delete_files.asp"-->
</div>

<div id="sc4" class="tabcontent">
<!--#include file="tabs/delete_folders.asp"-->
</div>

<div id="sc5" class="tabcontent">
<!--#include file="tabs/user_admin.asp"-->
</div>

</div>
</div>

<script type="text/javascript">
initializetabcontent("tablist")
</script>

[ddadmin]

All you really need to do is just create a function that hides both the Tabs and the DIV that contains all the sub contents, so something like this:


<script type="text/javascript">

function showhidetabs(ulid, divid){
var ulobj=document.getElementById(ulid)
var divobj=document.getElementById(divid)
ulobj.style.visibility=(ulobj.style.visibility!="hidden")? "hidden" : "visible"
divobj.style.visibility=(divobj.style.visibility!="hidden")? "hidden" : "visible"
}

</script>

<a href="javascript:showhidetabs('maintab', 'tabcontentarea')">Show/ Hide Admin</a>

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div id="tabcontentarea" class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>

Please format any code in your post using the CODE tag. This makes it a lot easier to read it.

[dclark22]

It works great!! Thank you.

Sorry about the code section. This is my first post so I'm still learning how to do it.


Thanks again.