Adminlte: jQuery Collapse

Asked

Viewed 89 times

0

I am trying to use the "box Collapse" of the Adminlte template (figure below), but when rendering dynamically it does not expand by clicking on the '+'. I’m using the code below in a Partialview.

I tried to use jQuery’s delegate function, but I don’t know which elements to select and the functions to be used to expand and close.

inserir a descrição da imagem aqui

@foreach (var item in Model)
{
<div class="row">
    <div class="col-md-12">
        <div class="box box-default collapsed-box item-collapsed">
            <div class="box-header with-border">
                <h3 class="box-title">@item.Nome</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <p>Descrição: @item.Descricao</p>
                <p>Preço: @item.Preco</p>
                <p>Quantidade: @item.Quantidade</p>
            </div>
        </div>
    </div>
</div>
}
jquery asp.net-mvc collapse

  • Voce can use Collapse bootstrap

  • It is because I did not see in the bootstrap of this model. I only saw with buttons and accordion.

  • I do not understand very well, can explain better what Voce wants

  • I just wanted to be able to expand Collapse through "+", because, as I said, dynamically rendering the expansion does not work.

1 answer

0

I removed the "item-collapsed" class, wrapped in the "divItens" div and added the "btn-expand" class to the button. Then I applied the following jQuery:

$("#divItens").delegate(".btn-expandir", "click", function (e) {
    $(this).parent().parent().parent().toggleClass('collapsed-box');
});


<div id="divItens">
@foreach (var item in Model)
{
<div class="row">
    <div class="col-md-12">
        <div class="box box-default collapsed-box">
            <div class="box-header with-border">
                <h3 class="box-title">@item.Nome</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool btn-expandir" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <p>Descrição: @item.Descricao</p>
                <p>Preço: @item.Preco</p>
                <p>Quantidade: @item.Quantidade</p>
            </div>
        </div>
    </div>
</div>
}
</div>

Browser other questions tagged jquery asp.net-mvc collapse

You are not signed in. Login or sign up in order to post.