show and hide div

**creative creator** · 05-04-2010, 06:33 PM

Hi folks,

i am geeting some problem on show and hiding the div, it's not working.

for your reference, i am attaching the code what i have written please go through the code and let me know if there is any errors...

it's urgent, it's not working from my side

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function switch_tabs(tab){
var tabs=document.getElementById('tabs').getElementsByTagName('li').length;
for(i=0; i<tabs;i++){
document.getElementByID('tab'+(i+1)).className='';
document.getElementByID('tab'+(i+1)+'_content').style.display='none';
}
document.getElementById(tab).className='selected';
document.getElementById(tab+'_content').style.display='block';
}
</script>
</head>

<body>
<div id="wrap">
<h1>Tabbed Content</h1>
<ul id="tabs">
<li id="tab1" class="selected"><a href="javascript:switch_tabs('tab1');">First Tab</a></li>
<li id="tab2" ><a href="javascript:switch_tabs('tab2');">second Tab</a></li>
<li id="tab3" ><a href="javascript:switch_tabs('tab3');">third Tab</a></li>
<li id="tab4" ><a href="javascript:switch_tabs('tab4');">fourth Tab</a></li>
</ul>
<div id="tab1_content" class="main">
<h2>First Tab content</h2>
<p>The content for the first tab</p>
</div>
<div id="tab2_content" class="main" style="display:none;">
<h2>Second Tab content</h2>
<p>The content for the first tab</p>
</div>
<div id="tab3_content" class="main" style="display:none;">
<h2>Third Tab content</h2>
<p>The content for the first tab</p>
</div>
<div id="tab4_content" class="main" style="display:none;">
<h2>Fourth Tab content</h2>
<p>The content for the first tab</p>
</div>
</div>
</body>
</html>

**vwphillips** · 05-05-2010, 07:37 AM

Code:

function switch_tabs(tab){
var tabs=document.getElementById('tabs').getElementsByTagName('li').length;
for(i=1; i<tabs;i++){
 document.getElementById('tab'+(i+1)).className='';
 document.getElementById('tab'+(i+1)+'_content').style.display='none';
}
document.getElementById(tab).className='selected';
document.getElementById(tab+'_content').style.display='block';
}

**creative creator** · 05-06-2010, 07:00 AM

thank you..

**creative creator** · 05-06-2010, 07:11 AM

hi,

i wrote some code for hide and show the div's using innerHTML concept, it's working fine, while clicking the link it's showing the content, but every time while clicking on the link it's going up(top of the page), for seeing the content we have have to scroll the page, how can i fix this prob while clicking also i have to be there, there should be no motion in page.

here is the ref coding what i have written...

<script type="text/javascript">
function switch_tabs(tab)
{
var content1="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content1+="<li><a href='#'>Praesent scelerisque </a></li>"
content1+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content1+="<li><a href='#'>Praesent scelerisque </a></li>"
content1+="</ul>";

var content2="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content2+="<li><a href='#'>Praesent scelerisque </a></li>"
content2+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content2+="<li><a href='#'>Praesent scelerisque </a></li>"
content2+="</ul>";
var content3="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content3+="<li><a href='#'>Praesent scelerisque </a></li>"
content3+="<li><a href='#'>Pellentesque tempus </a></li>"
content3+="<li><a href='#'>Dolor amt labore</a></li>"
content3+="</ul>";
var content4="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content4+="<li><a href='#'>Dolor amet labore </a></li>"
content4+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content4+="<li><a href='#'>Praesent scelerisque </a></li>"
content4+="</ul>";
var content5="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content5+="<li><a href='#'>Dolor amet labore </a></li>"
content5+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content5+="<li><a href='#'>Pellentesque tempus </a></li>"
content5+="</ul>";
var content6="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content6+="<li><a href='#' >Pellentesque tempus </a></li>"
content6+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content6+="<li><a href='#'>Praesent scelerisque </a></li>"
content6+="</ul>";
var content7="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content7+="<li><a href='#'>Nulla luctus eleifend </a></li>"
content7+="<li><a href='#'>Pellentesque tempus </a></li>"
content7+="<li><a href='#'>Praesent scelerisque </a></li>"
content7+="</ul>";
if(tab.id==1)
{
document.getElementById("content").innerHTML=content1;
}
if(tab.id==2)
{
document.getElementById("content").innerHTML=content2;
}
if(tab.id==3)
{
document.getElementById("content").innerHTML=content3;
}
if(tab.id==4)
{
document.getElementById("content").innerHTML=content4;
}
if(tab.id==5)
{
document.getElementById("content").innerHTML=content5;
}
if(tab.id==6)
{
document.getElementById("content").innerHTML=content6;
}
if(tab.id==7)
{
document.getElementById("content").innerHTML=content7;
}
document.getElementById("content").focus();
}
</script>

here is the div structure..

<div id="tofocus" style="border-top:1px solid #cacada; padding-top:10px;"><div id="content" ></div>
<ul id="archive-list">
<li><a id="1" href="#tofocus" onclick="javascript:switch_tabs(this);">Most Commented </a></li>
<li>Most Viewed
<ul class="list-n">
<li><a id="2" href="#tofocus" onclick="javascript:switch_tabs(this);">Most Commented </a></li>
<li><a id="3" href="#tofocus" onclick="javascript:switch_tabs(this);">Most Viewed</a></li>
<li><a id="4" href="#tofocus" onclick="javascript:switch_tabs(this);">Last Modified </a></li>
<li><a id="5" href="#tofocus" onclick="javascript:switch_tabs(this);">Last Published </a></li>
</ul>
</li>
<li><a id="6" href="#tofocus" onclick="javascript:switch_tabs(this);">Last Modified </a></li>
<li><a id="7" href="#tofocus" onclick="javascript:switch_tabs(this);">Last Published </a></li>
</ul>

</div>

tofocus is the id for the time i am focusing there for each time clicking.

**vwphillips** · 05-06-2010, 09:10 AM

note id names must start with an alpha charactor or $ but there is no need to use ids for this application

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

<script type="text/javascript">
function switch_tabs(tab)
{
var content1="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content1+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content1+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content1+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content1+="</ul>";

var content2="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content2+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content2+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content2+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content2+="</ul>";

var content3="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content3+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content3+="<li><a href='#' onclick='return false;'  >Pellentesque tempus </a></li>"
content3+="<li><a href='#' onclick='return false;'  >Dolor amt labore</a></li>"
content3+="</ul>";
var content4="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content4+="<li><a href='#' onclick='return false;'  >Dolor amet labore </a></li>"
content4+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content4+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content4+="</ul>";
var content5="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content5+="<li><a href='#' onclick='return false;'  >Dolor amet labore </a></li>"
content5+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content5+="<li><a href='#' onclick='return false;'  >Pellentesque tempus </a></li>"
content5+="</ul>";
var content6="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content6+="<li><a href='#' onclick='return false;'   >Pellentesque tempus </a></li>"
content6+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content6+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content6+="</ul>";
var content7="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content7+="<li><a href='#' onclick='return false;'  >Nulla luctus eleifend </a></li>"
content7+="<li><a href='#' onclick='return false;'  >Pellentesque tempus </a></li>"
content7+="<li><a href='#' onclick='return false;'  >Praesent scelerisque </a></li>"
content7+="</ul>";
if(tab==1)
{
document.getElementById("content").innerHTML=content1;
}
if(tab==2)
{
document.getElementById("content").innerHTML=content2;
}
if(tab==3)
{
document.getElementById("content").innerHTML=content3;
}
if(tab==4)
{
document.getElementById("content").innerHTML=content4;
}
if(tab==5)
{
document.getElementById("content").innerHTML=content5;
}
if(tab==6)
{
document.getElementById("content").innerHTML=content6;
}
if(tab==7)
{
document.getElementById("content").innerHTML=content7;
}
document.getElementById("content").focus();
return false;
}
</script>
</head>

<body>
<div style="height:600px;" ></div>
<div id="tofocus" style="border-top:1px solid #cacada; padding-top:10px;">
<div id="content" ></div>
<ul id="archive-list">
<li><a  href="#tofocus" onclick="return switch_tabs(1);">Most Commented </a></li>
<li>Most Viewed
<ul class="list-n">
<li><a href="#tofocus" onclick="return switch_tabs(2);">Most Commented </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(3);">Most Viewed</a></li>
<li><a href="#tofocus" onclick="return switch_tabs(4);">Last Modified </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(5);">Last Published </a></li>
</ul>
</li>
<li><a href="#tofocus" onclick="return switch_tabs(6);">Last Modified </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(7);">Last Published </a></li>
</ul>

</div>

</body>

</html>

or

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

<script type="text/javascript">
function switch_tabs(tab)
{
var content1="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content1+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content1+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content1+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content1+="</ul>";

var content2="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content2+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content2+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content2+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content2+="</ul>";

var content3="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content3+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content3+="<li><a href='#focus'  >Pellentesque tempus </a></li>"
content3+="<li><a href='#focus'  >Dolor amt labore</a></li>"
content3+="</ul>";
var content4="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content4+="<li><a href='#focus'  >Dolor amet labore </a></li>"
content4+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content4+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content4+="</ul>";
var content5="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content5+="<li><a href='#focus'  >Dolor amet labore </a></li>"
content5+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content5+="<li><a href='#focus'  >Pellentesque tempus </a></li>"
content5+="</ul>";
var content6="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content6+="<li><a href='#focus'   >Pellentesque tempus </a></li>"
content6+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content6+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content6+="</ul>";
var content7="<ul class='listtitles_he' style='border-bottom:1px solid #cacada; padding-bottom:10px;'>";
content7+="<li><a href='#focus'  >Nulla luctus eleifend </a></li>"
content7+="<li><a href='#focus'  >Pellentesque tempus </a></li>"
content7+="<li><a href='#focus'  >Praesent scelerisque </a></li>"
content7+="</ul>";
if(tab==1)
{
document.getElementById("content").innerHTML=content1;
}
if(tab==2)
{
document.getElementById("content").innerHTML=content2;
}
if(tab==3)
{
document.getElementById("content").innerHTML=content3;
}
if(tab==4)
{
document.getElementById("content").innerHTML=content4;
}
if(tab==5)
{
document.getElementById("content").innerHTML=content5;
}
if(tab==6)
{
document.getElementById("content").innerHTML=content6;
}
if(tab==7)
{
document.getElementById("content").innerHTML=content7;
}
document.getElementById("content").focus();
return false;
}
</script>
</head>

<body>
<div style="height:600px;" ></div>
<a name="tofocus"></a>
<div id="tofocus" style="border-top:1px solid #cacada; padding-top:10px;">
<div id="content" ></div>
<ul id="archive-list">
<li><a  href="#tofocus" onclick="return switch_tabs(1);">Most Commented </a></li>
<li>Most Viewed
<ul class="list-n">
<li><a href="#tofocus" onclick="return switch_tabs(2);">Most Commented </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(3);">Most Viewed</a></li>
<li><a href="#tofocus" onclick="return switch_tabs(4);">Last Modified </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(5);">Last Published </a></li>
</ul>
</li>
<li><a href="#tofocus" onclick="return switch_tabs(6);">Last Modified </a></li>
<li><a href="#tofocus" onclick="return switch_tabs(7);">Last Published </a></li>
</ul>

</div>

</body>

</html>

Thread: show and hide div

Thread Tools

Search Thread

show and hide div

refreshing the page

Bookmarks

Bookmarks

Posting Permissions