How to Set width of div to 100% when second div hide by jQuery

I have below code. I want to set width of blue div to 100% when I hide the red div. Any idea? My Javascript code

我有以下代码。当我隐藏红色div时,我想将蓝色div的宽度设置为100%。任何想法?我的Javascript代码

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#button").toggle(function() {
                $(this).text('Show Content');
            }, function() {
                $(this).text('Hide Content');
            }).click(function(){
                $("#red").slideToggle("slow");
            });
        });
        </script>

my style

<style>
        #red {

            width: 50%;
            border: 5px solid red;
            float: left
        }
        .blue {
            float: left;
            border: 5px solid #00F;
        }
        </style>

and my html code

和我的HTML代码

<a href="#" id="button" class="button_style">Hide content</a> <br/>
<div id="red">Content</div>
<div class="blue">&nbsp;</div>

4 个解决方案

#1

Try adding a class which assigns 100% width.

尝试添加一个分配100%宽度的类。

JS :

$("#red").slideToggle("slow",function(){
    $('.blue').toggleClass('fullWidth')
});

CSS :

.fullWidth{
    width:100%;
}

Fiddle Demo

Reference : toggleClass()

参考:toggleClass()

#2

The version of toggle you are using is deprecated: 1.8, removed: 1.9

您正在使用的切换版本已弃用:1.8,已删除:1.9

The statement you are looking for could be

您正在寻找的声明可能是

$("#red").next(".blue").css("width","100%");

or have an extra class and use .toggleClass("wide"); where .wide has the desired width

或者有一个额外的类并使用.toggleClass(“wide”);其中.wide具有所需的宽度

Here is my suggestion which removes the deprecated toggle function from the button

这是我的建议,它从按钮中删除了不推荐的切换功能

Live Demo

$(function() {
   $("#button").click(function(){
       var $red = $("#red"),
           hiding=$red.is(":visible"), 
           text = hiding?'Show Content':'Hide Content';
       $(this).text(text);
       $red.slideToggle("slow");
       $red.next(".blue").toggleClass("wide");
  });
});

I think you might want to play with animation instead

我想你可能想要用动画来代替

Live Demo

$(function() {
   $("#button").click(function(){
       var $red = $("#red"),
           $blue=$("#red").next(".blue"),
           hiding=!$red.hasClass("wide"), 
           text = hiding?'Show Content':'Hide Content';
       $(this).text(text);
       $red.animate({width:(hiding?0:100)+'%'},2000);
       $blue.animate({width:(hiding?100:0)+'%'},2000);
       $red.toggleClass("wide");
   });
});

#3

Change width of the div depending on the text

根据文本更改div的宽度

Try this:

$(document).ready(function () {
    $("#button").toggle(function () {
        $(this).text('Show Content');
        $('.blue').css('width', '100%');
    }, function () {
        $(this).text('Hide Content');
        $('.blue').css('width', 'auto');
    }).click(function () {
        $("#red").slideToggle("slow");
    });
});

DEMO

#4

JS :

$(document).ready(function() {
        $("#button").toggle(function() {
            $(this).text('Show Content');
            $("#red").next(".blue").css("width","100%");
        }, function() {
            $(this).text('Hide Content');
            $("#red").next(".blue").css("width","46%");
        }).click(function(){
            $("#red").slideToggle("slow");
        });
    });

CSS :

 #red {

        width: 50%;
        border: 5px solid red;
        float: left
    }
    .blue {
        float: right;
        border: 5px solid #00F;
        width: 46%;
    }

Html:

<a href="#" id="button" class="button_style">Hide content</a> <br/>
    <div id="red">Content</div>
    <div class="blue">&nbsp;</div>

I think this is what you want.

我想这就是你想要的。

Demo