How to display a different number of blocks at different widths in js?

  • 0
    Now I have 6 blocks shown at a width of 768px, the rest are hidden, there is a button that shows all blocks. It needs to show 8 blocks at 1120px width. How to do it in js?

    function openbox(logo) {
       display = document.getElementById(logo).style.display;
      if(display=='none'){
          document.getElementById("button").innerText = "Скрыть";  
          document.getElementById(logo).style.display='flex';
       }else{
          document.getElementById("button").innerText = "Показать все";
          document.getElementById(logo).style.display='none';
         }  
     };


    <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
    
            <div id="logo">
    
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
    
            </div>
        
        
        <button class="slider-main__button-read-more" id="button" onclick="openbox('logo');  return false">Показать все</button>


    #logo {
    display: none
    }
    JavaScript Anonymous, Feb 22, 2020

  • 1 Answers
  • 0
    Make them a common parent and calculate the width of the window when loading DOM elements.

    And then go through the children of that parent and with the desired index === 6 or 8 start adding hidden.

    https://developer.mozilla.org/en/docs/Web/API / Pare ...



    If you want to subscribe when changing the screen size:

    https://developer.mozilla.org/en/docs/Web/API / Wind ...

    then the same function can be called here
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!