Results 1 to 5 of 5

Thread: show and hide div

  1. #1
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default show and hide div

    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>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    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';
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you..

  4. #4
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default refreshing the page

    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.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •