JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<div class="inner">
		<img src="i/logo.png">
		<ul>
			
			<li><a href="#contact" onclick="anichange('#vipad-1');">Контакты</a></li>
			<li><a href="#komplimenti" onclick="anichange('#vipad-2');">Комплименты</a></li>
			<li><a href="http://v-gorowek.livejournal.com/" target="_blank">Блог</a></li>
			<li><a href="#uslugi" onclick="anichange('#vipad-4');">Услуги</a></li>
			
            <div id="vipad-1">
                vipad-1
            </div>
            
            <div id="vipad-2">
                vipad-2
            </div>
            
            <div id="vipad-4">
				<h2>Контакты</h2>
				<p class="contact">Будем знакомы - меня зовут Катя. Искренне считаю, что некрасивых или нефотогиеничных людей не бывает.<br/>
				Принимаю заказы на съемки в Ростове-на-Дону, Москве, любом другом городе, а также заграницей ;-)</p>

				<hr>
				<div class="infodiv">
					<p class="info">Mail - <a href="[email protected]" target="_blank">[email protected]</a></p>
					<p class="info">Vk.com - <a href="https://vk.com/kostinaa" target="_blank">vk.com/kostinaa</a></p>
					<p class="info">Phone - <span class="">8-938-108-18-62</span></p>
				</div>
				<img src="i/contact.jpg">
			</div> 
		</ul>
	</div>
</nav>

CSS

nav {
  margin-bottom: 20px; }
  nav img {
    margin-top: 10px; }
  nav ul {
    margin-top: -20px;
    font-size: 17px; }
    nav ul li {
      margin-right: 10px;
      display: inline-block; }
      nav ul li a {
        text-decoration: none;
        color: black; }
      nav ul li a:hover {
        color: rgba(0, 0, 0, 0.8); }
  nav #vipad {
    display: none;
    margin-top: 20px;
    margin-bottom: 30px;
    background: white;
    max-height: 900px; }
    nav #vipad a {
      color: black;
      font-family: 'got'; }
    nav #vipad a:hover {
      color: rgba(0, 0, 0, 0.8); }
    nav #vipad img {
      width: 600px; }
    nav #vipad h2 {
      margin-bottom: -10px; }
    nav #vipad .contact {
      margin: 0 auto;
      padding-bottom: 10px;
      text-align: center;
      width: 500px;
      color: black;
      font-size: 15px;
      line-height: 18px; }
    nav #vipad .infodiv .info {
      line-height: 23px;
      font-size: 14px; }
      nav #vipad .infodiv .info span {
        font-weight: 700; }

JavaScript

(function() {
    
    var blocks = $("div[id*='vipad-']");
    blocks.hide();
    
    $(blocks[0]).show();
})();


function anichange (objName, event) {
    $("div[id*='vipad-']").hide();
    
    if ($(objName).css('display') == 'none' ) {
        $(objName).animate({height: 'show'}, 400);
    } else {
        $(objName).animate({height: 'hide'}, 200);
    }
    
    event.preventDefault();
}