JQuery Show Hide with animation : Code Entry | CFF Coding Source

Format Your SQL Script

HTML

<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<ul class="auto-grid">
  <li class="SidePanel">This is your left side, usually an information panel (OR) a menu system.</li>
  <li><div class="MainPanel"><span class="smTitle" id="ShowSidePanel">◀ Hide Side Panel</span></div></li>
</ul>

<script>
let CustomeToggle = (divId,SidePanel)=>{
            divId.toggle((100)); // Changing this to a much higher number, say 500, makes it look unprofessional and cartoonish. 
			                     // If that is what you are after, that is fine. In my case, 100 slides in and out right nicely.
            switch($(SidePanel).text()){
                case '◀ Hide Side Panel':
                $(SidePanel).text('Show Side Panel ▶')
                break;
                case 'Show Side Panel ▶':
                $(SidePanel).text('◀ Hide Side Panel')
                break;
            }
        }

$('#ShowSidePanel').click(function(){
            CustomeToggle($('.SidePanel'),this)
        })
</script>

CSS

Preview