Advanced Search

Merge or unmerge lists of items depending on window size

/ Published in: JavaScript
Save to your folder(s)
For side by side ULs that become too wide on small screens/devices.
The following script let you merge or unmerge ULs depending on the size of the screen/device.

Works with jQuery

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var mergeLists = {
  2.  
  3. 	triggerWidth : 768,
  4.  
  5. 	listsContainer : $('.container'),
  6.  
  7. 	init : function(){
  8.  
  9. 		if($(window).width() <= this.triggerWidth){
  10.  
  11. 			this.listsContainer.each(function(i){
  12.  
  13. 				var listFirst = $(this).find('ul:first-child'),
  14. 				listSecond = $(this).find('ul:nth-child(2)');
  15.  
  16. 				if(!listSecond.is(':hidden')){
  17.  
  18. 					var list = listSecond.find('li');
  19.  
  20. 					$(list).addClass('second');
  21. 					listFirst.append(list);
  22. 					listSecond.hide();
  23. 				}
  24. 			});
  25. 		}else{
  26. 			this.listsContainer.each(function(i){
  27.  
  28. 				var listFirst = $(this).find('ul:first-child'),
  29. 				listSecond = $(this).find('ul:nth-child(2)');
  30.  
  31. 				if(listSecond.is(':hidden')){
  32. 					listSecond.append($(this).find('li.second'));
  33. 					listSecond.show();
  34. 				}
  35. 			});
  36. 		}
  37. 	}
  38. }
  39. mergeLists.init();
  40. $(window).resize(function(){
  41. 	mergeLists.init();
  42. });
  43.  
  44. <div class="container">
  45. <ul>
  46. <li></li>
  47. <li></li>
  48. <li></li>
  49. </ul>
  50. <ul>
  51. <li></li>
  52. <li></li>
  53. <li></li>
  54. </ul>
  55. </div>
  56.  
  57. .container ul{
  58. display: table-cell;
  59. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.