Changing height of a div using a button on small screen only

Question

I want to change the height of a div with a button using jQuery only on small window. On larger screens, I want the div height to always remain the original. The button is visible on small screen.

Here is what I have tried, but need to refresh the page again and again when the window is resized.

Is there also any solution using JavaScript only.

function resize() {
  if (window.innerWidth <= 700) {
    $('.btn').on('click', function() {
      $('.container').toggleClass('small-window')
    });
  }
}

$(document).ready(function() {
  resize();
  $(window).resize(resize);
});

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 20px;
}

.block-text {
  display: block;
}

.container {
  position: relative;
  border: 1px solid;
  min-height: 60px;
  /* On larger screens */
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.btn {
  position: absolute;
  right: 10px;
  display: none;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .btn {
    display: block;
  }
}

.small-window {
  height: 120px !important;
}

span {
  display: block;
  margin-top: 8px;
}

<div class="container">
  <h1>Resize Window</h1>
  <button type="button" class="btn">Toggle height</button>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Does this answer your question? [How to trigger the window resize event in JavaScript?](https://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript) — Alain Cruz, Jun 19 '21 at 16:14
No sorry. I couldn't understand that and can't apply it. I need some more guidance. — Ocean, Jun 19 '21 at 16:24
I advise you to use `matchMedia()` instead of `window.innerWidth`. — s.kuznetsov, Jun 19 '21 at 16:44
Could you please refer me to the site from where I can learn more about it? — Ocean, Jun 19 '21 at 16:53
@Ocean, https://webdevetc.com/blog/matchmedia-events-for-window-resizes/ , and mdn - https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia — s.kuznetsov, Jun 19 '21 at 17:23
**Implementation:** This question was asked to build a **responsive navbar** with a new concept for the website: https://monicamp.com. It helped the website to load even faster and simplify the development. — Ocean, Aug 01 '21 at 17:54

Mohamed-Yousef · Accepted Answer · 2021-06-19T16:43:08.327

Create a functions one for resize and one for toggleClass
No need to use the click event inside the function you can use it like below

The Idea here is to use the window width to add/remove a class from the .btn to prevent the click in the big screens

// resize function to add/remove class to the .btn
function resize(){
  if(window.innerWidth <= 700){   //if screen width
    $('.btn').addClass('btn-small-window'); // add this class to the btn
  }else{
    $('.container').removeClass('small-window'); // reset the container by remove the class small-window
    $('.btn').removeClass('btn-small-window'); // remove the btn class btn-small-window on big screen to prevent the click
  }
}
// resizeToggle function to toggle the small-window class
function resizeToggle(){
   $('.container').toggleClass('small-window'); // toggle the small-window class
}

$(document).ready(function() {
  $(window).resize(resize).resize(); // resize event and last .resize() to run the function onload
  $(document).on('click' , '.btn.btn-small-window' ,resizeToggle); // btn click event to toggle the class
});

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 20px;
}

.block-text {
  display: block;
}

.container {
  position: relative;
  border: 1px solid;
  min-height: 60px;
  /* On larger screens */
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.btn {
  position: absolute;
  right: 10px;
  display: none;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .btn {
    display: block;
  }
}

.small-window {
  height: 120px !important;
}

span {
  display: block;
  margin-top: 8px;
}

<div class="container">
  <h1>Resize Window</h1>
  <button type="button" class="btn">Toggle height</button>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Note: For why I use $(document).on('click' , '.btn.btn-small-window' ,resizeToggle); you can take a look at Event binding on dynamically created elements? in your case add/remove btn-small-window considered as dynamically

If you resize a window with the increased height of the div, it does not return to the original height. — Ocean, Jun 19 '21 at 16:30
@Ocean it will return to the original height on big screen .. Please check it again .. answer updated — Mohamed-Yousef, Jun 19 '21 at 16:33
Thank you so much. Appreciated to you. This is what exactly I was looking for. — Ocean, Jun 19 '21 at 16:38

score 2 · Answer 2 · answered Jun 19 '21 at 16:37

Using a pure JavaScript approach, we can compute a very clean solution. What you are missing, is to remove the small-window class when the window resizes to a width bigger than 700px.

function resize() {
  if (window.innerWidth > 700) {
    document.querySelector('.container').classList.remove('small-window');
  }
}

function toggleClass() {  
    document.querySelector('.container').classList.toggle('small-window');
}

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector('.btn').onclick = toggleClass;
  window.onresize = resize;
});

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 20px;
}

.block-text {
  display: block;
}

.container {
  position: relative;
  border: 1px solid;
  min-height: 60px;
  /* On larger screens */
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.btn {
  position: absolute;
  right: 10px;
  display: none;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .btn {
    display: block;
  }
}

.small-window {
  height: 120px !important;
}

span {
  display: block;
  margin-top: 8px;
}

<div class="container">
  <h1>Resize Window</h1>
  <button type="button" class="btn">Toggle height</button>
</div>

Thanks a lot. I appreciate it too. Thanks for the clarification and your help. Could you please let me know which one is better to use jQuery or JavaScript method to load page faster. — Ocean, Jun 19 '21 at 16:46
JavaScript will always be faster than `jQuery`. In fact, I would recommend to try a pure `JavaScript` approach. As of ES6, `JavaScript` have way more features that should allow to do the same things you would do with `jQuery`, but with a much better perfiormance. — Alain Cruz, Jun 19 '21 at 16:49

Changing height of a div using a button on small screen only

2 Answers2

Linked