There is a menu. When you click it goes down. There is also a div with the class .doc-info . It is necessary to alter the script so that when leaving the menu, in .doc-info padding-top : from 320px changed to 420px , for example. And so that when performing else , the padding back 320px by 320px . That is, the question is how to add padding-top: 420px style padding-top: 420px through JS and remove it when you click padding-top: 420px ? I hope clearly explained.

 // TOGGLE MNU MOBILE SANDWICH $(".toggle-mnu").click(function() { $(".sandwich").toggleClass("active"); }); $(".toggle-mnu").click(function() { if ($(".hidden-mnu").is(":visible")) { $(".hidden-mnu").slideUp(); } else { $(".hidden-mnu").slideToggle(); } });
  • one
    api.jquery.com/css - Igor
  • Tried what I'm doing wrong? - YourDeveloper
  • @YourDeveloper, is indicated like this: $(".doc-info").css("padding-top", "100px"); - Yuri
  • @YourDeveloper - Carefully Read the Documentation - Igor
  • @YourDeveloper, you can not change the code in the question under the comments. You are bringing users who have responded to the old version of the code. - Yuri

2 answers 2

  1. You can add via the standard css function:

 $('.my-block').click(function() { $(this).css('padding-top', '50px'); }); 
 .my-block { width: 100px; height: 100px; background-color: black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="my-block"></div>

  1. By adding the addClass class:

 $('.my-block').click(function() { $(this).addClass('my-block_padding-top--50px'); // Для удаления .removeClass(); }); 
 .my-block { width: 100px; height: 100px; background-color: black; } .my-block_padding-top--50px { padding-top: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="my-block"></div>

  • Is it possible to adjust the adaptability through the 1st method? Suppose a resolution less than 1200 padding top is given 100px per 1000 - 50px, etc. - YourDeveloper

 $('div').click(function() { $('div').toggleClass('padding'); }); 
 div { width: 300px; height: 300px; background: red; } div.padding {padding: 10px} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div></div>