How to make collapsible divs open without the buttons of other divs going down?

Question

How to make collapsible divs open without the buttons of other divs going down?

Navigation

#1 by (2 votes)

4

I'm doing a portfolio gallery, based on Bootstrap so you're responsive. So I have a set of thumbnails that will correspond to a job that should be aligned:

ClickingthemopensacollapsibleDIV.Iintendthatwhenthisdivopens,theotherthumbnailsonthesamelineremaininplace:

And do not come down when we click on one of them:

ButthissothattheorderoftheHTMLtagsisnotchangedsothatitispossiblethatinsmalldevicesthelayoutislikethis:

I would also like to know if there is an option that makes it not only possible to open a% collapsible% at a time.

My code is this: JSFIDDLE

javascript jquery css twitter-bootstrap

asked by anonymous 27.03.2014 / 23:32

1 answer

Problems with $ http and ng-repeat angularjs beginner $$ hashKey Error "Decode error - output not utf-8" in Sublime Text

score 2 · Accepted Answer

Here's a suggestion:

var bigMedia = $(window).width() < 750 ? false : true;  // detectar se o ecrã é grande ou pequeno
$(window).resize(function () {
    bigMedia = $(window).width() < 750 ? false : true; // no caso de um resize do ecrã, detectar novamente
});
var conteudo;
$('.panel-heading').on('click', function () {
    conteudo && conteudo.slideToggle(function () { // se houver um conteudo aberto, fechá-lo
        $(this).remove();  // e removê-lo depois de fechado
    });    

    if (!bigMedia) $(this).parent().next().slideToggle('collapse'); // se for ecrã pequeno abrir como o HTML está
    else { // se for ecrã grande: 
        conteudo = $(this).parent().next().clone(); // fazer um clone do conteudo
        conteudo.attr('id', ''); // remover ID para não duplicar
        $(this).closest('.container').append(conteudo); // adicionár o clone ao fim de cada ".container"
        conteudo.slideToggle();  // abrir
    }
});

Example

Note that I removed all of your Javascript and wrote new code.