0

I'm trying to create an accordion using flexbox and transitions, adding and removing a collapse class with jQuery. The problem I'm having is if I set flex-basis as auto for the expanded divs, the animation doesn't work. See http://jsfiddle.net/vbLqg40h/ for an example. If I change the flex-basis from auto to 500px, the height of the flex container, the animation works ( http://jsfiddle.net/vbLqg40h/2/ )...I don't know why.

html

<div id="wrapper">
    <div id="box1" class="expand"></div>
    <div id="box2" class="expand collapse"></div>
    <div id="box3" class="expand collapse"></div>
</div>

css

#wrapper {
    height: 500px;
    display: flex;
    flex-direction: column;
}

.expand {
    flex: 1 1 auto;
    transition: all 2s;
}

.collapse {
    flex: 0 1 25px;
}

#box1 {
    background-color: yellow;
}

#box2 {
    background-color: green;
}

#box3 {
    background-color: blue;
}

javascript

$('.expand').click(function() {
  var expandId = $(this).attr('id');
  $('.expand').each(function() {
   var thisId = $(this).attr('id');
   if (expandId != thisId) {
     $('#' + thisId).addClass('collapse');
   } else {
     $('#' + thisId).removeClass('collapse');
   }
 });
});
Chris Purves
  • 399
  • 4
  • 16
  • 1
    transition, or animation works on numeric values only. auto is not and there is nothing to inherit or calculate from that value :( – G-Cyrillus Sep 05 '14 at 18:05
  • Based on comment by @GCyrillus and answer by @DRD, instead of `.addClass` and `.removeClass` lines in javascript I'll do something like `.css('flex', '0 0 25px')` and `.css('flex', '1 1 450px')` instead. I've tested this out and it's working. Thanks. – Chris Purves Sep 08 '14 at 13:00

3 Answers3

1

I implemented this using the following code :

HTML

<ul class="actions-list">
        <li class="action-item facebook">
            Facebook
        </li>
        <li class="action-item google">
            GooglePlus
        </li>
        <li class="action-item linkedin">
            LinkedIn
        </li>
        <li class="action-item picasa">
            Picasa
        </li>
        <li class="action-item twitter">
            Twitter
        </li>
        <li class="action-item wikipedia">
            Wikipedia
        </li> </ul>

CSS

/* Flex box define */
.actions-list {
    display: -webkit-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.actions-list .action-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    overflow: hidden;
}

/* Design: widths, colors, borders, etc... */
.actions-list {
    margin: 0;
    padding: 0;
}
.actions-list .action-item {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: lighter;
    cursor: pointer;
    background-color: #66bbcc;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    color: #000000;
    padding-left: 52px;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 32px;
    line-height: 52px;
    height: 52px;
    max-width: 50px;
}
.actions-list .action-item:hover {
    max-width: 150px;
    background-color: #ff9966;
    padding-right: 10px;
}
.actions-list .action-item:first-child {
    border: none;
}

.facebook {
    background-image: url(http://www.webdeveasy.com/code/assets/images/facebook.png);
}
.google {
    background-image: url(http://www.webdeveasy.com/code/assets/images/google.png);
}
.linkedin {
    background-image: url(http://www.webdeveasy.com/code/assets/images/linkedin.png);
}
.picasa {
    background-image: url(http://www.webdeveasy.com/code/assets/images/picasa.png);
}
.twitter {
    background-image: url(http://www.webdeveasy.com/code/assets/images/twitter.png);
}
.wikipedia {
    background-image: url(http://www.webdeveasy.com/code/assets/images/wikipedia.png);
}

JS Fiddle link of the accordian

Reference

Click here for reference of the project

sukantk
  • 39
  • 4
  • It looks to me that what makes the transition work in your example is setting `max-width` instead of `flex-basis`. I still have to explicitly set the value, but it may be a bit more convenient. – Chris Purves Sep 08 '14 at 13:06
  • Yes. Exactly. Please do upvote my answer if you find it helpful :) – sukantk Sep 08 '14 at 14:08
1

To make the transition work, you will need to explicitly set the flex-basis. Here's a CSS-only solution of click-activated accordion: http://jsfiddle.net/zx854854/. If you want to persist the click-state, you can use radio input and label combinations.

HTML:

<div id="wrapper">
    <div tabindex = "1"></div>
    <div tabindex = "2"></div>
    <div tabindex = "3"></div>
</div>

CSS:

#wrapper {
    height: 300px;
    display: flex;
    flex-direction: column;
}

#wrapper > * {
    flex: 0 0 25px;
    outline: 0;
    transition: flex-basis 0.3s linear;
}

#wrapper > div:first-of-type {
    background-color: blue;
    order: 3;
}

#wrapper > div:first-of-type:not(:focus) + div:not(:focus) + div:not(:focus) {
    flex-basis: 250px;
}

#wrapper > div:nth-of-type(2) {
    background-color: green;
    order: 2;
}

#wrapper > div:nth-of-type(3) {
    background-color: yellow;
    order: 1;
}

#wrapper > div[tabindex]:focus {
    flex: 1 1 250px;
}
DRD
  • 5,557
  • 14
  • 14
0

I'm thinking you're experiencing the bug described here: https://bugzilla.mozilla.org/show_bug.cgi?id=731886

Example: https://bug731886.bugzilla.mozilla.org/attachment.cgi?id=601838

Would it work for you to set it to 100% instead?:

flex: 1 1 100%;
aolsen
  • 36
  • 5