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


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.