How to hide/show div tags using JavaScript?

Question

Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:

<div id="body">
    <h1>Numbers</h1>
</div>
<div id="body1">
    Body 1
</div>

Here is the CSS code:

#body {
    height: 500px;
    width: 100%;
    margin: auto auto;
    border: solid medium thick;
}

#body1 {
    height: 500px;
    width: 100%;
    margin: auto auto;
    border: solid medium thick;
    display: hidden;
}

Here is the JavaScript code:

function changeDiv() {
  document.getElementById('body').style.display = "hidden"; // hide body div tag
  document.getElementById('body1').style.display = "block"; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

NB: CSS tags are declared in different files

Iwo Kucharski · Accepted Answer · 2013-03-06 23:50:18Z

33

Have you tried

document.getElementById('body').style.display = "none";

instead of

document.getElementById('body').style.display = "hidden";?

answered Mar 6, 2013 at 23:50

Iwo Kucharski

3,8353 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vishal vasistha · Accepted Answer · 2013-10-20 14:04:05Z

9

just use a jquery event listner , click event. let the class of the link is lb... i am considering body as a div as you said...

$('.lb').click(function() {
    $('#body1').show();
    $('#body').hide();
 });

answered Oct 20, 2013 at 14:04

vishal vasistha

2063 silver badges6 bronze badges

Comments

Touhid Rahman · Accepted Answer · 2013-05-19 17:34:23Z

4

Use the following code:

function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}

answered May 19, 2013 at 17:34

Touhid Rahman

2,59323 silver badges22 bronze badges

Comments

Rahul Sawant · Accepted Answer · 2015-04-28 10:20:31Z

1

You can Hide/Show Div using Js function. sample below

   <script>
        function showDivAttid(){

            if(Your Condition)
            {
             document.getElementById("attid").style.display = 'inline';
            }
            else
            {
            document.getElementById("attid").style.display = 'none';
            }

        }

    </script>

HTML - Show/Hide this text

answered Apr 28, 2015 at 10:20

Rahul Sawant

1,26410 silver badges12 bronze badges

Comments

codeeasy · Accepted Answer · 2016-03-16 11:21:12Z

1

Set your HTML as

 <div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

And now set the javascript as

     function changeDiv()
      {
      document.getElementById('body').hidden = "hidden"; // hide body div tag
      document.getElementById('body1').hidden = ""; // show body1 div tag
      document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
      // display text if JavaScript worked
       }

Check, it works.

answered Mar 16, 2016 at 11:21

codeeasy

111 bronze badge

Comments

brooksrelyt · Accepted Answer · 2019-03-25 20:49:18Z

1

Consider using jQuery. Life is much easier with:

$('body').hide(); $('body1').show();

edited Mar 25, 2019 at 20:49

brooksrelyt

4,0536 gold badges37 silver badges58 bronze badges

answered Mar 6, 2013 at 23:54

polybios

1,1598 silver badges20 bronze badges

Comments

Fady Wageeh · Accepted Answer · 2015-01-18 20:56:46Z

-3

try yo write document.getElementById('id').style.visibility="hidden";

edited Jan 18, 2015 at 20:56

answered Jan 18, 2015 at 20:34

Fady Wageeh

12 bronze badges

1 Comment

mpromonet Over a year ago

Probably style.visibility ?

Collectives™ on Stack Overflow

How to hide/show div tags using JavaScript?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related