JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<link rel="stylesheet" href="///ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<a class="show_hideAbout show_hideAboutArr" href="#" >About</a>

<a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

<div class="slidingDivAbout">Some Content About</div>
<div class="slidingDivAboutArr">About Attr<img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
<div class="slidingDivContact">Some Content Contact</div>
<div class="slidingDivContactArr">Contact Attr<img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>

JavaScript

$(document).ready(function() {

    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0);

    $('.show_hideAbout').click(function() {
        $(".slidingDivContact").slideUp(300);
        $(".slidingDivContactArr").fadeOut(300);
        $(".slidingDivAbout").slideToggle(300, "linear", function() {
            $(".slidingDivAboutArr").fadeToggle(300);
        });
    });
    $('.show_hideContact').click(function() {
        $(".slidingDivAbout").slideUp(300, function() {
            $(".slidingDivAboutArr").fadeOut(300, function() {
                $(".slidingDivContact").slideDown(300);
                $(".slidingDivContactArr").fadeIn(300, "linear");
            });
        });
    });
});