CODEWITHSUNDEEP
javascripthtmldom
sam
sam

Reputation: 35

Hide Div tab on clicking the tab

function myFunction() {
  alert("helloworld");
  document.getElementById("div2").style.display = "none";
}

function myFunction1() {
  alert("helloworld");
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.visibility = "visible";

}


function myFunctionone() {
  alert("helloworld");
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.visibility = "visible";

}
div.round1 {
  border: 1px solid deepskyblue;
  border-radius: 4px;
  height: 170px;
  width: 30%;
  margin: auto;
}

.up {
  vertical-align: -145px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body onload="myFunction()">

  <div id="div1" class="round1">

    <table>
      <tr>
        <td>
          <img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
          <br>If a browser cannot find an image, it will display the alternate text
        </td>

        <td>
          <img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
      </tr>

    </table>
  </div>

  <div id="div2" class="round1">

    <table>
      <tr>
        <td>
          <img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
          <br>If a browser cannot find an image, it will display the alternate text
        </td>

        <td>
          <img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
      </tr>

    </table>
  </div>

  <br>
  <div align="left">
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home" onclick="myFunctionone()">One</a></li>
        <li><a data-toggle="tab" href="#menu1" onclick="myFunction1()">Two</a></li>
        <li><a data-toggle="tab" href="#menu1">Functional</a></li>
        <li><a data-toggle="tab" href="#menu3">Three</a></li>
      </ul>

      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>One</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Two</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Three</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Others</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
      </div>
    </div>
  </div>



</body>

</html>

Upvotes: 0

Views: 7294

Answers (7)

Kumar_Vikas
Kumar_Vikas

Reputation: 845

Check the below code: Added 'display:none' to div2. and Toggle it on menu click.

function myFunction1() {
  document.getElementById("div1").style.display = "";
  document.getElementById("div2").style.display = "none";

}


function myFunctionone() {
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.display = "";

}
<div id="div1" class="round1">

  <table>
    <tr>
      <td>
        <img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
        <br>If a browser cannot find an image, it will display the alternate text
      </td>

      <td>
        <img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
    </tr>

  </table>
</div>

<div id="div2" class="round1" style="display:none">

  <table>
    <tr>
      <td>
        <img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
        <br>If a browser cannot find an image, it will display the alternate text
      </td>

      <td>
        <img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
    </tr>

  </table>
</div>

Upvotes: 0

Prajwal
Prajwal

Reputation: 419

Complete and Simple Tab implementation with help of some css and JQuery here:

<div class="wrapper">
  <h1>Quick and Simple Tabs</h1>
  <p>A quick and easy method for tabs that supports multiple tab groups on one page.</p>
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
  <li><a href="#tab1" class="active">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<section id="first-tab-group" class="tabgroup">
  <div id="tab1">
    <h2>Heading 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla deserunt consectetur ratione id tempore laborum laudantium facilis reprehenderit beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
  </div>
  <div id="tab2">
    <h2>Heading 2</h2>
    <p>Adipisci autem obcaecati velit natus quos beatae explicabo at tempora minima voluptates deserunt eum consectetur reiciendis placeat dolorem repellat in nam asperiores impedit voluptas iure repellendus unde eveniet accusamus ex.</p>
  </div>
  <div id="tab3">
    <h2>Heading 3</h2>
    <p>Atque ratione soluta laboriosam illo inventore amet ipsum aliquam assumenda harum provident nam accusantium neque debitis obcaecati maxime officia saepe ad ducimus in quam libero vero quasi. Saepe sit nisi?</p>
  </div>
</section>
</div>

And some piece of JQuery:

$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
  e.preventDefault();
    var $this = $(this),
        tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
        others = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
    others.removeClass('active');
    $this.addClass('active');
    $(tabgroup).children('div').hide();
    $(target).show();

})

Add some styles to it:

$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
  e.preventDefault();
    var $this = $(this),
        tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
        others = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
    others.removeClass('active');
    $this.addClass('active');
    $(tabgroup).children('div').hide();
    $(target).show();

})

And you done:) hope this helps.

Upvotes: 0

fdonv
fdonv

Reputation: 1

I think that display = "block" will help you.

document.getElementById("div2").style.display = "block";

Upvotes: 0

Mayoori - gaja digital agency
Mayoori - gaja digital agency

Reputation: 284

Remove on page load function and add display:none for div2. 

    //change jquery to toogle div
    function myFunction1() {
        $("#div2").show();
        $("#div1").hide();
    }

    function myFunctionone() {
        $("#div1").show();
        $("#div2").hide();
    }

Upvotes: 0

Ankit
Ankit

Reputation: 207

please try

<script>
myFunction();


function myFunction() {
    document.getElementById("div2").style.display = "none";
}

function myFunction1() {
    document.getElementById("div1").style.display = "none";

}


function myFunctionone() {
    document.getElementById("div2").style.visibility = "visible"; 

}

</script>

Upvotes: 0

Araz Shamsaddinlouy
Araz Shamsaddinlouy

Reputation: 401

first of all make the 

.div2{
   display:none;
}

so it should be hidden on page load.

then on the tabs put a data-target attribute like follow:

<div class="tab-pane fade" data-target="div2">

then on click do follow

$(".tab-pane").on("click",function(){
   var item = $(this).attr("data-target");
   if (item == "div2"){
       $(".div2").show()
       $(".div1").hide()
   }else{
       $(".div1").show()
       $(".div2").hide()
   }
}

Upvotes: 0

Sakezzz
Sakezzz

Reputation: 468

$(document).ready(function () {
      $('#div2').hide()
      $('.nav a').click(function () {
          $('#div2').show()
          $('#div1').hide()
      })
})

Do you mean this?

Upvotes: 1

Related Questions