css - How to hideshow div with javascript - Stack Overflow

admin2025-04-19 1

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:

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;
}

Start phase:

And end phase:

Share Improve this question asked Jun 19, 2012 at 11:52 user123_456 5,82526 gold badges87 silver badges142 bronze badges

1 And whathaveyoutried.? – antyrat Commented Jun 19, 2012 at 11:55
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 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 Commented Jun 19, 2012 at 12:14

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

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

or you can see other demo which increment width of first div here .. http://jsfiddle/miqdad/3WDbz/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/mplungjan/5rdXh/

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>

Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle/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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745041792a281587.html

cssHow to hideshow div with javascriptStack Overflow

最新回复(0)