accordion effect side by side

Question

accordion effect side by side

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm going to have several guitars on the site, depending on the categories, so I put them side by side, so when I click on one of the guitars, the one on the side generates an undesirable spacing,

HTML

<divclass="seg-nt">
    <div class="caixa">
        <span class="open-nt">esportes</span>

        <div class="contentNT hide">
            01
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">politica</span>

        <div class="contentNT hide">
            02
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">policial</span>

        <div class="contentNT hide">
            03
        </div>
    </div>

CSS

.show{display: block;}
.hide{display: none;}
.seg-nt{
   padding: 00.80906148867314% 00.80906148867314%;
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
 }

.seg-nt .caixa{
   position: relative;
   float: left;
   margin: 0% 00.80906148867314% 00.80906148867314% 0%;
   padding: 00.80906148867314% 00.80906148867314%;
   width: 49.55555555555555%;
   border: 1px solid #e1e1e1;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

.seg-nt .caixa:nth-child(-n+2){margin: 0% 00.80906148867314% 00.80906148867314% 0%;}
.seg-nt .caixa:nth-child(2n){margin: 0% 0% 00.80906148867314% 0%;}
.seg-nt .caixa:last-child{margin: 0%;}

.seg-nt .caixa span{
   position: relative;
   display: block;
   width: 100%;
   height: 30px;
   line-height: 30px;
   font-size: 1.3em;
   text-align: center;
   text-transform: uppercase;
   cursor: pointer;
}

.seg-nt .caixa .contentNT{
   float: left;
   height: 150px;
   border-top: 1px solid #e1e1e1;
   background-color: orange
}

JQUERY

$(function(){
  $('.open-nt').click(function(){
    var contentNT = $(this).parent().find('.contentNT');
        if(!contentNT.hasClass('show')){
        $('.caixa').find('.show').slideUp('fast', function(){
            $(this).addClass('hide').removeClass('show');
        });
        contentNT.slideDown('fast', function(){
            $(this).addClass('show').removeClass('hide');
        });
    }
});

});

css

asked by anonymous 10.11.2018 / 20:02

2 answers

1

If you are using Bootstrap: add

<objeto class="p-0 m-0"/>

If you are not using bootstrap: do not add the

margin:0px !important;
padding: 0px !important;

the class used by the element. or

style="padding:0px !important; margin:0px !important;"

All items will only be taken up in the space required.

12.11.2018 / 20:13

Recurring payment error PagSeguro Transform 2 php array into a single array

score 2 · Accepted Answer

You can use column-count to do this, because the browser "equalizes" the distribution of the content in two columns for example. Note that the browser will always try to match the height of the two columns, so it will always throw the content where it has space left over.

I do not know if this is exactly the result you expect, but with css it was the only way I found it ... I left a comment in the css code

$(function(){
    $('.open-nt').click(function(){
        var contentNT = $(this).parent().find('.contentNT');
            if(!contentNT.hasClass('show')){
            $('.caixa').find('.show').slideUp('fast', function(){
                $(this).addClass('hide').removeClass('show');
            });
            contentNT.slideDown('fast', function(){
                $(this).addClass('show').removeClass('hide');
            });
        }
    });
});

.show{display: block;}
.hide{display: none;}
div{width: 100%;}
.seg-nt{
   padding: 00.80906148867314% 00.80906148867314%;
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
   border: 1px solid #e1e1e1;
 }

.seg-nt .caixa{
   position: relative;
   float: left;
   margin: 0% 00.80906148867314% 00.80906148867314% 0%;
   padding: 00.80906148867314% 00.80906148867314%;
   width: 325px;
   border: 1px solid #e1e1e1;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

.seg-nt .caixa:nth-child(-n+2){margin: 0% 00.80906148867314% 00.80906148867314% 0%;}
.seg-nt .caixa:nth-child(2n){margin: 0% 0% 00.80906148867314% 0%;}
.seg-nt .caixa:last-child{margin: 0%;}

.seg-nt .caixa span{
   position: relative;
   display: block;
   width: 100%;
   height: 30px;
   line-height: 30px;
   font-size: 1.3em;
   text-align: center;
   text-transform: uppercase;
   cursor: pointer;
}

.seg-nt .caixa .contentNT{
   float: left;
   height: 150px;
   border-top: 1px solid #e1e1e1;
   background-color: orange
}
/* separa o conteúdo em 2 colunas */
.seg-nt {
  column-count: 2;
}
/* evita que o conteúdo da caixa se quebre começando em uma coluna e terminando na outra */
.caixa {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divclass="seg-nt">
    <div class="caixa">
        <span class="open-nt">esportes</span>

        <div class="contentNT hide">
            01
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">politica</span>

        <div class="contentNT hide">
            02
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">policial</span>

        <div class="contentNT hide">
            03
        </div>
    </div>
    <div class="caixa">
        <span class="open-nt">esportes</span>

        <div class="contentNT hide">
            01
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">politica</span>

        <div class="contentNT hide">
            02
        </div>
    </div>

    <div class="caixa">
        <span class="open-nt">policial</span>

        <div class="contentNT hide">
            03
        </div>
    </div>
</div><!--seg-nt-->