I have a flexbox layout with an image wrapped around it and I want to display some information when the image is clicked. The information should appear between the row containing the image and the row directly below it, without moving the "column". This is the type of effect I want: http://olmenta.altervista.org (when you click on a book).
Here's what I did: https://jsfiddle.net/fabhpnw9/3/
var coll = document.getElementsByClassName("rectangle"); var i; for (i = 0; i < coll.length; i ) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }
.flex-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .rectangle { width: 200px; height: 50px; background-color: red; cursor: pointer; } .text { display: none; position: absolute; }
<div class="flex-container"> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="flex-item"> <div class="rectangle"></div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> </div>
The "column" is moving due to the size change of the flex item. I can solve this problem by adding "position:absolute" to the text, but then the text conflicts with the next line. Do you know how I can make the columns not move and the text not conflict with the next line?
Detailed Information Disclosure ElementsAlready have a built-in browser turn on/off mechanism. So why not use it and modify its behavior to suit our requirements.
The basic principle is
Through CSS, we can control how and where content is displayed. Whether we use the default block style or the Flexbox/Grid layout, the content is placed outside the regular document flow. They are regular elements, so basically anything can happen.
By default
detail/summary
stays open when the user clicks elsewhere, we need some Javascript to automatically close the currently "public" content.Users tend to get confused when they don't see a "Close Button", so I put one in there. However, click anywhere in the info box to close it.
I went a little overboard with this and created a responsive demo that completely ignored your code (sorry!) while trying to be as close to the example site as possible. I commented wherever applicable. If it's unclear, please tell me in the comments.
fragment
If we switch to switching the
active
class on.flex-item
, we can add a height to the active.flex-item
so that.text
Leave space.Note: In order to position
.text
elements correctly, it is important not to position.flex-item
s (orposition: static
). Otherwise theleft: 0
of.text
will be to the left of the parent.flex-item
.Here is a snippet of a working example: