I have two DIVs, one is used as button and appear on mobile screens only, and the other one contains information that I want always be visible on desktop and could be toggle on mobile using Show/hide button.

On mobile the information should be hidden initially. The issue is when I hide information on screen below 480px, it is not visible on screen above 480px

Hide the information by clicking Show/hide button then expend the screen you will find noting on screen, I want information be visible in this case.

Here is my code

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggle();
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}

.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
}

<script src=".1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

I have two DIVs, one is used as button and appear on mobile screens only, and the other one contains information that I want always be visible on desktop and could be toggle on mobile using Show/hide button.

On mobile the information should be hidden initially. The issue is when I hide information on screen below 480px, it is not visible on screen above 480px

Hide the information by clicking Show/hide button then expend the screen you will find noting on screen, I want information be visible in this case.

Here is my code

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggle();
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}

.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

• javascript
• jquery

• Your logic seems to work fine in both variations of screen size, ie. the green div is always visible on larger screens, and hidden on smaller, and toggled by the button. What is the issue you have? – Rory McCrossan Commented Feb 13, 2018 at 15:10
• Hide the information by clicking Show/hide button then expend the screen you will find noting on screen, I want information be visible in this case. – DMP Commented Feb 13, 2018 at 15:13
• Ah, I understand your issue. I've added an answer for you below – Rory McCrossan Commented Feb 13, 2018 at 15:20

2 Answers 2

Hide the information by clicking Show/hide button then expend the screen you will find noting on screen, I want information be visible in this case

This behaviour is because the toggle() call has added a style attribute directly to the element which is difficult to override with CSS, which it needs to be when the media query state changes.

To fix this, use toggleClass() instead. You can then ignore this class outside of the media query so the element is always shown.

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggleClass('toggle');
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}
.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
  .information.toggle {
    display: block;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

You can use this example fiddle to see the effect working as you resize the window.

$(document).ready(function() {
      $('.show-hide').click(function() {
        $(this).next().toggle();
      });
   
  

  $( window ).resize(function() {
    if( $( window ).width()>480){
      $('.information').toggle(true);
    }else{
      $('.information').toggle(false);
    }
    });
    });

.show-hide {
      background-color: #ffa2a2;
      padding: 8px;
      display: none;
    }

    .information {
      background-color: #a4dca4;
      padding: 8px;
    }

    @media only screen and (max-width: 480px) {
      .show-hide {
        display: inline-block;
      }
      .information {
        display: none;
      }
    }
    @media only screen and (min-width: 480px) {
      .show-hide {
        display: none;
      }
      .information {
        display: block;
      }
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="show-hide">Show/Hide Info</div>

    <div class="information">
      Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
    </div>