How to make a slide-out menu at the top with jQuery?

Question

JavaScript

Good time of the day.
Help, please, with the script of the slide-out menu at the top.
I need that when I click on the menu button, the menu itself appears and the bottom content moves down by 170px.
When you press the button again, the menu disappears and the content moves up.
I wrote a script, but when the button is pressed again, the menu disappears, the content did not move up.

<div id="icon_menu_img"><img class="icon_menu_img" src="images/picture/icon-menu2.png" alt="Меню"/></div>

        <div class="icon-menu" style="display:none;">
          <div id="menu_left">
            <nav>
              <div class="hr">
                <ul class="menu_1">
                  <li><a href="index.php">Хостинг</a></li>
                  <li><a href="library/domain.php">Домен</a></li>
                  <li><a href="html/site.php">Сайт</a></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
    <div class="content">
    ...............
    </div>

$(document).ready ( function ( ) {
        $("#icon_menu_img").click(function(){
        $(".content").css("padding-top","170px");
          $(".icon-menu").toggle(); 
        });
});

I understand what needs to be done through conditions. But I don't understand how to implement it?

Answer 1

Possible without conditions

.content.active{
    padding-top: 170px;
}

$(document).ready ( function ( ) {
        $("#icon_menu_img").click(function(){
          $(".content").toggleClass("active");
          $(".icon-menu").toggle(); 
        });
});