CODEWITHSUNDEEP
css
Tabski
Tabski

Reputation: 198

How to have a block element display after all inline elements in a row without breaking them into separate lines

On my webpage, I want to have fixed size inline icons that can break to the next line like normal depending on the screen width, like this: Just Icons

When a user clicks one of these icons, I want to open up a block element below that line of icons. So if a user clicked "Icon 4" it would look like this: What I want

However, the block, which comes directly after its respective icon in the html, may cause the icons to break when it is displayed, which is expected given the order. What I currently have

My first thought would be to use flex boxes and the order property, but it looks like I would have to do some calculations to figure out the order, which is something that I want to avoid.

Is it possible to achieve the results in the second image with CSS alone?

And here is a snippet of what I have so far:

function iconClicked(contentId) {
    for (var i = 0; i <= 6; i++) {
        document.getElementById('content'+i).style.display='none';
    }
    document.getElementById('content'+contentId).style.display='block';
}
.container {    
    width:100%;
    margin:0 auto;
    text-align:center;
}

.container * {
    margin: 10px;
    font-size: 36px;
}

.icon {
    background-color: lightcoral;
    display: inline-block;
    width: 300px;
    height: 150px;
}

.content {
    background-color: lightblue;
    width: 100%;
    display: none; /* Changed to block by javascript */
}
<div class="container">
    <p class="icon" onclick="iconClicked(0)">Icon 0</p>
    <p class="content" id="content0">Content 0</p>

    <p class="icon" onclick="iconClicked(1)">Icon 1</p>
    <p class="content" id="content1">Content 1</p>

    <p class="icon" onclick="iconClicked(2)">Icon 2</p>
    <p class="content" id="content2">Content 2</p>

    <p class="icon" onclick="iconClicked(3)">Icon 3</p>
    <p class="content" id="content3">Content 3</p>

    <p class="icon" onclick="iconClicked(4)">Icon 4</p>
    <p class="content" id="content4">Content 4</p>

    <p class="icon" onclick="iconClicked(5)">Icon 5</p>
    <p class="content" id="content5">Content 5</p>

    <p class="icon" onclick="iconClicked(6)">Icon 6</p>
    <p class="content" id="content6">Content 6</p>
</div>

Upvotes: 1

Views: 462

Answers (1)

ewwink
ewwink

Reputation: 19164

you need to detect if row can show 2 item or more, if yes then move current content after content5

function iconClicked(contentId) {
  for(var i = 0; i <= 6; i++) {
    document.getElementById('content' + i).style.display = 'none';
  }
  w = window,
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    content = document.getElementById('content' + contentId);

  if(x > 640) {
    pNode = document.getElementById('content5');
    pNode.parentNode.insertBefore(content, pNode.nextSibling);
  }
  content.style.display = 'block';
}
.container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.container * {
  margin: 10px;
  font-size: 36px;
}

.icon {
  background-color: lightcoral;
  display: inline-block;
  width: 300px;
  height: 150px;
}

.content {
  background-color: lightblue;
  width: 100%;
  display: none;
  /* Changed to block by javascript */
}
<div class="container">
  <p class="icon" onclick="iconClicked(0)">Icon 0</p>
  <p class="content" id="content0">Content 0</p>

  <p class="icon" onclick="iconClicked(1)">Icon 1</p>
  <p class="content" id="content1">Content 1</p>

  <p class="icon" onclick="iconClicked(2)">Icon 2</p>
  <p class="content" id="content2">Content 2</p>

  <p class="icon" onclick="iconClicked(3)">Icon 3</p>
  <p class="content" id="content3">Content 3</p>

  <p class="icon" onclick="iconClicked(4)">Icon 4</p>
  <p class="content" id="content4">Content 4</p>

  <p class="icon" onclick="iconClicked(5)">Icon 5</p>
  <p class="content" id="content5">Content 5</p>

  <p class="icon" onclick="iconClicked(6)">Icon 6</p>
  <p class="content" id="content6">Content 6</p>
</div>

Upvotes: 1

Related Questions