Javascript Twitter引导：点击按钮后用span12展开

我正在为我的项目使用引导

这是我设计布局所遵循的结构-

<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>

这就是我们工作得很好的地方。 我把这个手风琴藏在窗台上

我想要的-

$('.hide-accordion').hide();
$(function () {
    $('.button-hiding').click(function () {
        $('.hide-accordion').toggle(this);
    });
});

当手风琴被隐藏时，我希望span8与

span12

一起全幅显示，我一点击按钮，手风琴就会出现。然后它应该是原始的

span8

宽度

我也用jQuery尝试过这个-

$('.hide-accordion').hide();
$(function () {
    $('.button-hiding').click(function () {
        $('.hide-accordion').toggle(this);
        $('.Expand-this>div .span8').removeClass('span8');
        $(this).addClass('span12');
    });
});

但是运气不好，救命啊？

试试这个

HTML:-

 <div class="row-fluid">
    <div class="span8 expand-this">
        <div class="row-fluid">
            <div class="span6 pull-left">
                <b>Display Name</b>
            </div>
            <div class="span6 pull-right">
                <input type="text"/>
            </div>
        </div>
    </div>
    <div class="span4 hide-accordion">
        <div class="block">
            ...some information..
        </div>
    </div>
<div>
<button class="button-hiding"></button>

---

你能正确缩进你的HTML代码吗？请注意，缺少一些代码（按钮代码）。@Manoz:如果答案解决了您的问题，请将其标记为“正确”。

$(function () {
    $('.hide-accordion').hide();
    $(".expand-this").removeClass("span8").addClass("span12")
    $('.button-hiding').click(function () {
        if($(".expand-this").hasClass('span8')){
            $(".expand-this").removeClass("span8").addClass("span12")
        }else{
            $(".expand-this").removeClass("span12").addClass("span8")
        }
        $('.hide-accordion').toggle();
    });
});