expanding an inline-block jumps to above row

Question

I have a series of articles

<section>
<article>1</article>
<article>2</article>
<article>3</article>
....
<article>999</article>
<section>

arranged in a grid of three per row

section { 
  position: relative 
}
article { 
  display: inline-block; 
  width: 33%;
} 

and I want that they expand horizontally to fully occupy its row when clicked.

so I create an expanded class

.expanded {
  position:absolute;
  left:0px;
  width: 100%;
}

and apply it on click

$("article").click(function(){ 
  $(this).toggleClass("expanded"); 
});

I am almost there, as you can see in the fiddle here http://jsfiddle.net/aqw339r0/1/

When I click on any of the articles they expand to the full width of the row; but the problem is that when I click the first article of a row (except the first row) it "jumps" to the row immediately above.

I have tried changing the position and display attributes of both article and .expanded but I cannot get the behavior I need. For example: When I change the position:absolute of .expanded, the blocks 5 and 6, "jump" to the row below. Similar when I remove display:inline-block and change to float:left.

Do you have any ideas of why this happens and how to correct it?

Answer 1

Using the solution from @Rick (minus the css top edit) and then toggling an additional element to keep other elements in place, this should do what is needed: Fiddle

  $("article").click(function() { 
        $(this).toggleClass("expanded"); 
        if ($(this).hasClass("expanded"))
        {
            $(this).before("<article class='blank'>&nbsp;</article>");
        }
        else
        {
            $(this).prevAll('.blank').first().remove();
        }
  });

To explain further, when the element is clicked:

if ADDING the class 'expanded', then this will also add a blank article element (before) as a placeholder to keep the flow consistent. This is important because when the element with class 'expanded' becomes position: absolute it is removed from the normal flow of the content.

if REMOVING the class 'expanded', then this will also remove the blank article placeholder element. The prevAll function looks through all previous elements with the class 'blank' and then takes the first() one and removes it. Because it was inserted 'before', this is guaranteed to remove the correct blank article placeholder.

Answer 2

When position:absolute is set on an <article> element, that takes it out of the normal content flow, and causes the offset. We can correct it by adding an empty <article> as a placeholder when the click triggers, and removing it when click again.

var open = false;

jQuery("article").click(function () {
    open = !open;

    if (open) {
        $(this).addClass("expanded");
        $(this).before("<article class='holder'>&nbsp;</article>");
    } else {
        $("article").removeClass("expanded");
        $(".holder").remove();
    }
});

p.s. I'm not that good at jQuery, any suggestions are welcome.

jsfiddle

Answer 3

I can't think of a pure CSS solution, but since you're using jQuery anyway, simply hard-code the expanded element's top:

$("article").click(function() { 
  $(this).css('top', $(this).position().top);
  $(this).toggleClass("expanded"); 
});

Fiddle

The top style will be ignored once the expanded class is removed.

Answer 4

Try this

 <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    </section>
    <section>
    <article>4</article>
    <article>5</article>
    <article>6</article>
    <section>
    <section>
    <article>7</article>
    <article>8</article>
    <article>9</article>
    </section>

    section {
        position:relative;
    }

    article { 
        width: 30%;
        min-width: 200px;
        min-height: 200px;
        display: inline-block;
        border: 1px solid black;
    }

    .expanded {
        width: 100%;
        background-color:#eef;
        left:0px;
        top:0;
        position:absolute;
        transition: 0.2s linear;
    }

    // if you want others to close while expanding
    $("article").click(function(){ 
       $('article').removeClass("expanded");
        $(this).toggleClass("expanded"); 
    });


// esle if you want everything to be expanded
   $("article").click(function(){ 
        $(this).toggleClass("expanded"); 
    });