Can jQuery truncate an HTML horizontal list to two rows?

ashipma
June 1, 2023
283 views
0 votes
2 Answers

I have a list of items that are laid out horizontally and they will go the full width of their containing element and then they will wrap on the next line. But I want to only display two lines of items and then have a "show more" link that will show two more rows at a time until all rows are displayed.

Here is what my markup looks like. This works fine, except I am not sure how to show only the first two rows of this. Does anyone have any ideas on how this could be done? I don’t know the width of the containing element (it could stretch or shrink at will and if it does, the two rows still need to adapt to the new width).

.items {
  overflow-y:hidden;
  max-height:30px;
}

.item {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-decoration: none!important;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
}

.item-inner {
  display: block;
  position: relative;
  overflow: hidden;
  height: 29px;
  border-radius: 2px;
}

.item-text {
  background-color: transparent;
  border: 0;
  display: block;
  font-size: 13px;
  line-height: 29px;
  margin: 0;
  outline: 0;
  padding: 0 10px 0 11px;
  text-align: center;
  white-space: nowrap;
}

<span class="items">
    <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 2</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 3</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 4</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 5</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 6</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 7</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 8</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 9</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 10</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 11</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 12</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 13</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 14</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 15</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 16</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 17</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 18</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 19</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 20</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 21</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 22</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 23</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 24</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 25</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 26</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 27</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 28</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 29</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 30</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 31</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 32</span></span></span>
</span>

Answers

Here is a simple way to do it.

first set all the items inside a div and add above the items another div for "show more".

<div class="container">
    <div class="next" onclick="changeHeight()">
        <span class="nextText">Show more<span>
    </div>
    <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
.........
</div>

Then add JS script for onclick event.

<script>
        function changeHeight(){
            const cont = document.querySelector('.container');
            const divInnerContentHeight = cont.scrollHeight;
            const divClientHeight = cont.clientHeight;
            
            console.log(divInnerContentHeight);
            console.log(divClientHeight);
            
            if(divClientHeight < divInnerContentHeight){
                cont.setAttribute("style",`height:${divClientHeight + 80}px`);
                if(divClientHeight+ 80 >= divInnerContentHeight)
                    document.querySelector('.nextText').innerHTML = "Show less";
            }
            else{
                cont.setAttribute("style",'height:91px');
                document.querySelector('.nextText').innerHTML = "Show more";
            }
        }
    </script>

Here the final result.

function changeHeight(){
            const cont = document.querySelector('.container');
            const divInnerContentHeight = cont.scrollHeight;
            const divClientHeight = cont.clientHeight;
            
            //console.log(divInnerContentHeight);
            //console.log(divClientHeight);
            
            if(divClientHeight < divInnerContentHeight){
                cont.setAttribute("style",`height:${divClientHeight + 80}px`);
                if(divClientHeight+ 80 >= divInnerContentHeight)
                    document.querySelector('.nextText').innerHTML = "Show less";
            }
            else{
                cont.setAttribute("style",'height:91px');
                document.querySelector('.nextText').innerHTML = "Show more";
            }
        }

.container{
    width: 50%;
    margin: auto;
    height: 91px;
    overflow: hidden;
    padding-bottom: 18px;
}
.next {
    position: relative;
    top: 100%;
    z-index: 100;
    background-color: #d9cece;
    text-align: center;
}
.next:hover {
    background-color: whitesmoke;
    cursor: pointer;
}
    .item {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-decoration: none!important;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
}

.item-inner {
  display: block;
  position: relative;
  overflow: hidden;
  height: 29px;
  border-radius: 2px;
}

.item-text {
  background-color: transparent;
  border: 0;
  display: block;
  font-size: 13px;
  line-height: 29px;
  margin: 0;
  outline: 0;
  padding: 0 10px 0 11px;
  text-align: center;
  white-space: nowrap;
}

<div class="container">
    <div class="next" onclick="changeHeight()">
        <span class="nextText">Show more<span>
    </div>
    <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 2</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 3</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 4</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 5</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 6</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 7</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 8</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 9</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 10</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 11</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 12</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 13</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 14</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 15</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 16</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 17</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 18</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 19</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 20</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 21</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 22</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 23</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 24</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 25</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 26</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 27</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 28</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 29</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 30</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 31</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 32</span></span></span>
</div>

Assuming you know the height of the elements, my answer first loops through the items and calculates which row they would be grouped by their top value.

Then the read more button just sets the max height of the parent element to the height of the elements multiplied by the row number. I also hide the read more button once the last row is displayed

function loadReadMore() {
  const items = document.querySelector(".items");
  const allItems = items.querySelectorAll(".items .item");
  const readMore = document.querySelector(".readMore");

  let rows = 0;
  let curTop = 0;
  const maxHeight = 40;
  let row = 1;

  items.style["max-height"] = maxHeight + "px";

  allItems.forEach((el) => {
    let rect = el.getBoundingClientRect();
    el.dataset.height = rect.height + "px";
    if (curTop < el.offsetTop) {
      curTop = el.offsetTop;
      rows++;
    }

    el.dataset.row = rows;
  });

  readMore.addEventListener("click", () => {
    if (row < rows) {
      row++;
      items.style["max-height"] = (maxHeight * row) + "px";

      if (row == rows) {
        readMore.classList.add("hide")
      }
    }
  });
}

window.addEventListener('resize', loadReadMore)
loadReadMore();

.items {
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

.item {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  padding: 0;
  text-align: center;
  text-decoration: none!important;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
  display: inline-block;
  
}

.hide {
  display: none;
}

.item-inner {
  display: block;
  position: relative;
  overflow: hidden;
  height: 29px;
  border-radius: 2px;
}

.item-text {
  background-color: transparent;
  border: 0;
  display: block;
  font-size: 13px;
  line-height: 29px;
  margin: 0;
  outline: 0;
  padding: 0 10px 0 11px;
  text-align: center;
  white-space: nowrap;
}

<div class="items">
  <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 2</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 3</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 4</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 5</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 6</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 7</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 8</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 9</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 10</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 11</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 12</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 13</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 14</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 15</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 16</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 17</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 18</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 19</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 20</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 21</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 22</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 23</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 24</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 25</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 26</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 27</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 28</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 29</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 30</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 31</span></span>
  </span>
  <span class="item"><span class="item-inner"><span class="item-text">Item 32</span></span>
  </span>
</div>
<button class="readMore">Read More</button>

Please signup or login to give your own answer.

Click here to cancel reply.