AdminLTE: jQuery collapse

Question

AdminLTE: jQuery collapse

Navigation

#1 by (0 votes)

0

I'm trying to use the "box collapse" of the AdminLTE template (figure below), but when rendering dynamically it does not expand when clicking on '+'. I'm using the code below in a PartialView.

I tried to use the delegate function of jQuery, but I do not know which elements to select and the functions to be used to expand and close.

@foreach(variteminModel){<divclass="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

asked by anonymous 29.12.2017 / 15:12

1 answer

C # Failed to send emails using SmtpClient Where do I start to integrate my game with database?

score 0 · Answer 1

I removed the "item-collapsed" class, wrapped it in the div "divItens" 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>