JSFiddle - React, Tailwind, and code Playground

HTML

<div id="show"> <a href="#show" id="open" class="toggletitle">More Info +</a>

<div id="content"> <a href="#hide" id="close" class="toggletitle">Less Info –</a>

<p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p>
</div>
</div>

CSS

html, html a, body {
    text-decoration: none;
}
/* Requesting assistance START */
 #content {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
#show:target #content {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
#show:target #open {
    display: none;
    visibility: hidden;
    transition-delay: 0s;
}
/* Requesting assistance END */

/* Link Hover Properties */
 .toggletitle {
    font-size: 20px;
}
a:link {
    -webkit-transition:color .1s ease-in;
    -moz-transition:color .1s ease-in;
    -o-transition:color .1s ease-in;
    transition:color .1s ease-in;
    color: #000;
}
a:visited {
    color: #000;
}
a:hover {
    -webkit-transition:color 0.5s ease-out;
    -moz-transition:color 0.5s ease-out;
    color: #0000FF;
}
a:active {
    text-decoration: none;
    color: #000;
}

JavaScript

document.getElementById('show').addEventListener('click', function(){
alert('1');
   var elm = document.getElementById('show');
    elm.style.display = 'none';
});

document.getElementById('content').addEventListener('click', function(){
alert('2');
});