Div block after clicking an element row (responsive)

Question

I have a list of products that, when clicked, show a built-in pop-up that contains more information about the item with a click.

Now the fact is that this list also reacts, so on the desktop this list will consist of 4 columns, tables of the 3rd column, mobile 2 columns, etc.

I know that I can use jquery to count these list items and determine after which nth item this block should be displayed, but how would I achieve this when resizing the browser?

I set the example in jsfiddle .

$(".products li").click(function(e) { e.preventDefault(); $(".products li").removeClass("active"); $(this).addClass("active"); $(".popup-holder").after( $(".product-popup") ); var i = $(this).index(); var r = 4; do { if ( i > r ) { r += 4; if ( i == r) { r += 4; } } else { i++; } } while ( i != r ); $(".products li:nth-child("+i+")").after( $(".product-popup") ); $(".product-popup").show(); $(".product-popup span").text(i); }); 

Under a visual example of what I'm trying to achieve:

After clicking the list item, a pop-up window is displayed after the 4th item:

After resizing the browser, a pop-up should appear after the third element:

Answer 1

I would think of it differently. The idea is to first add a margin-bottom to the current element to create the necessary space, and then add the element below it using the absolute position, and we calculate the top position using the current element pressed.

Here is a very simplified example that you can refine to make the calculations more accurate taking into account various parameters (dynamic content, dynamic height, etc.).

 $(".products li").click(function(e) { e.preventDefault(); $(".products li").removeClass("active"); $(this).addClass("active"); var i = $(this).data('information'); var top = $(this).position().top + $(this).height(); $(".product-popup").css('top',top + 30); $(".product-popup").text(i); $(".product-popup").show(); }); window.onresize = function(event) { if($(".active").length) { var top = $(".active").position().top + $(".active").height(); $(".product-popup").css('top',top + 30); } }; 

 ul.products { display: block; padding: 0; list-style-type: none; flex-wrap:wrap; } ul.products li { display: inline-block; padding: 10px; margin: 5px; width: 20.66666%; background-color: #f2f2f2; border: 1px solid #000; cursor: pointer; } ul.products li:before { content: ''; display: block; padding-bottom: 50%; margin-bottom: 10px; width: 100%; background-color: #ccc; } ul.products li.active { background-color: red; margin-bottom:80px; } .product-popup { display: none; padding: 10px; margin-bottom: 10px; background-color: #f2f2f2; border: 1px solid #000; position:absolute; height:50px; left:5px; right:0; } .container { position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul class="products"> <li data-information="More information 1">Example product 1</li> <li data-information="More information 2">Example product 2</li> <li data-information="More information 3">Example product 3</li> <li data-information="More information 4">Example product 4</li> <li data-information="More information 5">Example product 5</li> <li data-information="More information 6">Example product 6</li> <li data-information="More information 7">Example product 7</li> <li data-information="More information 8">Example product 8</li> <li data-information="More information 9">Example product 9</li> <li data-information="More information 10">Example product 10</li> <li data-information="More information 11">Example product 11</li> <li data-information="More information 12">Example product 12</li> </ul> <div class="popup-holder"> <div class="product-popup"></div> </div> </div> 

UPDATE

Here is a demo with dynamic content:

 $(".products li").click(function(e) { e.preventDefault(); $(".products li").removeClass("active").css('margin-bottom',5); $(this).addClass("active"); var i = $(this).data('information'); var top = $(this).position().top + $(this).height(); $(".product-popup").css('top',top + 30); $(".product-popup").text(i); $(this).css('margin-bottom',$(".product-popup").outerHeight()); $(".product-popup").show(); }); window.onresize = function(event) { if($(".active").length) { var top = $(".active").position().top + $(".active").height(); $(".product-popup").css('top',top + 30); $(".active").css('margin-bottom',$(".product-popup").outerHeight()); } }; 

 ul.products { display: block; padding: 0; list-style-type: none; flex-wrap:wrap; } ul.products li { display: inline-block; padding: 10px; margin: 5px; width: 20.66666%; background-color: #f2f2f2; border: 1px solid #000; cursor: pointer; } ul.products li:before { content: ''; display: block; padding-bottom: 50%; margin-bottom: 10px; width: 100%; background-color: #ccc; } ul.products li.active { background-color: red; } .product-popup { display: none; padding: 10px; margin-bottom: 10px; background-color: #f2f2f2; border: 1px solid #000; position:absolute; left:5px; right:0; } .container { position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul class="products"> <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 1</li> <li data-information="More information 2">Example product 2</li> <li data-information="More information 3">Example product 3</li> <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 4</li> <li data-information="More information 5">Example product 5</li> <li data-information="More information 6">Example product 6</li> <li data-information="More information 7">Example product 7</li> <li data-information="More information 8">Example product 8</li> <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 9</li> <li data-information="More information 10">Example product 10</li> <li data-information="More information 11">Example product 11</li> <li data-information="More information 12">Example product 12</li> </ul> <div class="popup-holder"> <div class="product-popup"></div> </div> </div> 

Answer 2

I did with the position of the next element. When resizing the browser, it will also work.

 var cIt=null; $(".products li").click(function(e) { e.preventDefault(); cIt=$(this); showDetails($(this)); }); window.onresize = function(event) { if(cIt!=null) showDetails(cIt); }; function showDetails(item){ $(".products li").removeClass("active"); item.addClass("active"); $(".popup-holder").after( $(".product-popup") ); var i = item.index() +1; var elem=item; while(elem.next().position().top==elem.position().top) { elem=elem.next(); } elem.after( $(".product-popup") ); $(".product-popup").show(); $(".product-popup span").text(i); } 

 ul.products { display: block; padding: 0; list-style-type: none; } ul.products li { display: inline-block; padding: 10px; margin: 0 2% 10px 0; width: 20.66666%; background-color: #f2f2f2; border: 1px solid #000; cursor: pointer; } ul.products li:nth-of-type(4n+4) { margin: 0 0 1% 0; } ul.products li:before { content: ''; display: block; padding-bottom: 50%; margin-bottom: 10px; width: 100%; background-color: #ccc; } ul.products li.active { background-color: red; } .product-popup { display: none; padding: 10px; margin-bottom: 10px; background-color: #f2f2f2; border: 1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products"> <li data-information="More information 1">Example product 1</li><li data-information="More information 2">Example product 2</li><li data-information="More information 3">Example product 3</li><li data-information="More information 4">Example product 4</li> <li data-information="More information 5">Example product 5</li><li data-information="More information 6">Example product 6</li><li data-information="More information 7">Example product 7</li><li data-information="More information 8">Example product 8</li><li data-information="More information 9">Example product 9</li><li data-information="More information 10">Example product 10</li><li data-information="More information 11">Example product 11</li><li data-information="More information 12">Example product 12</li> </ul> <div class="popup-holder"> <div class="product-popup">More information (i = <span>0</span>)</div> </div>