Re sizing list items gracefully

Question

I have a list of products composed of two columns of inline-block list items. I would like the user to be able to click these items and have them expand to display more information, but it is not rendering as i would like.

I am using simple class toggles to increase the width of items :

$(document).ready(function () {
$('#products').on('click', 'li', function () {
$(this).toggleClass("open")
});
});

Expanding an item on the left fills the space and bumps the whole lot down as i would like. But expanding an item in the right column brings that item down and leaves a gap.

Here is the whole thing:

http://jsfiddle.net/MHJDB/

Is there a better way to build this list to have items cascade naturally when they change size?

I am not sure whats the problem. Your fiddle looks proper – Mandeep Jain Jul 25 '13 at 06:26 — Mandeep Jain, Jul 25 '13 at 06:26

score 0 · Answer 1 · edited May 23 '17 at 12:03

The main reason is you're using border property for each li.

On checking this SO answer:

The border css property will increase all elements "outer" size, excepts tds in tables.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

So I would suggest to replace your

border: 1px solid #eeeeee;

with outline

outline: 1px solid #eeeeee;

Outlines differ from borders in the following ways:

Outlines do not take up space, they are drawn above the content. [for you]

Outlines may be non-rectangular.

Add with that,

margin: 5px Set all the four margins of an element:

#products li {
    margin: 5px;
}

so Instead have

#products li {
     margin-bottom: 5px;  // equivalent to margin: 0px 0px 5px; 0px;
    }

Check this Updated JSFiddle

score 0 · Accepted Answer · answered Jul 25 '13 at 07:48

This is just a jQuery based solution that I've come up with.

Not the perfect one but will help you to get started.

jsfiddle is here

jQuery:

$(document).ready(function () {
    $('#products').on('click', 'li', function () {
    $(this).toggleClass("open");

          if("open" === $(this).attr("class")) {
            if($(this).before())
              $(this).before($(this).next());
              else
              $(this).after($(this));
        }

        if("right" === $(this).css("float") ) {
        $(this).after($(this).prev());
    }      
    });
    });

In the code above, it swipes the position of elements if the clicked element is on the right side.

Hope it helps! :-)

This looks like a good solution, i had no idea you could perform sinmple reordering with .before and .after — Ucinorn, Jul 26 '13 at 02:25

Re sizing list items gracefully

2 Answers2