How to hide/show div with javascript

Question

I want to achieve hide/show with div's in html but in this way.

Here is my html:

<div id="left"></div>
<div id="middle"> 
<input type="button" id="button"/>
</div>
<div id="right"></div>

And this is my css:

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}

I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left. Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:

Start phase:

And end phase: enter image description here

You could easily hide that div calling a function like function hideDiv(id, state) { document.getElementById(id).style.display = state; }. Now, onto the left div to move to get the rest of the space, wouldn't a width:100% do it? — AleksanderKseniya
– AleksanderKseniya, Commented Jun 19, 2012 at 11:57
@antyrat I tried only show/hide which I couldn't set properly as I am new to javascript so I just put detailed question in here. — user123_456
– user123_456, Commented Jun 19, 2012 at 12:14

Miqdad Ali · Accepted Answer · 2012-06-19 12:01:51Z

4

You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/

or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/

answered Jun 19, 2012 at 12:01

Miqdad Ali

6,1577 gold badges34 silver badges50 bronze badges

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

2 Comments

khurram Over a year ago

i was just creating that type of fiddle, thank God refresh this question see it is done )

user123_456 Over a year ago

One question, what if I have it other way around. To start it as div right hidden and then on button I can show it? How to change the code? Do I need to change css too?

Community · Accepted Answer · 2017-05-23 10:32:36Z

1

I had almost the same question a couple of days ago and maybe it helps you too. this example uses a checkbox to hide the div. and make the other div 100% width.

javascript, When right div is hidden left div has to be 100% width.

the javascript code from the example:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","40%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

and an example: http://jsfiddle.net/mplungjan/5rdXh/

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jun 19, 2012 at 13:37

Kees Sonnema

5,7926 gold badges54 silver badges108 bronze badges

Comments

ZygD · Accepted Answer · 2015-04-04 03:46:29Z

1

This is one of the best ways to hide a div element using JavaScript:

<html>
<head>
    <script>
      function hideDiv() {
      document.getElementById("myP2").style.visibility = "hidden";
      }
    </script>
</head>
<body>
    <button onClick="hideDiv()">Hide</button>
    <br>
    <br>
    <p id="myP2">Hello world!</p>
</body>
</html>

edited Apr 4, 2015 at 3:46

ZygD

24.8k41 gold badges107 silver badges144 bronze badges

answered Apr 4, 2015 at 2:32

Ronald Mathews

2,2781 gold badge25 silver badges27 bronze badges

Comments

Cranio · Accepted Answer · 2012-06-19 12:01:22Z

0

Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/

(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).

A Javascript-only solution would be much more difficult to implement.

answered Jun 19, 2012 at 12:01

Cranio

9,8764 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to hide/show div with javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related