JSFiddle - React, Tailwind, and code Playground

Horizontal toggle. Se pulsa el botón negro y se colapsa. Dentro de la zona rosa puede ir un menú por ejemplo.

by Yolanda Robles

HTML

<table style="height: 600px;">
     <tr>
         <td style="padding-right: 0px; vertical-align: top;"     id="main_menu">
             <div style="width:100px;background-color:pink;height:100%" />
         </td>
         <td style="padding-right: 0px; background-repeat: no-repeat; background-color: green;margin: auto; padding: auto; width: 2px;">
               <img class="headerlinkMenu" style="position: absolute; cursor:pointer;background-color:black;width:20px;height:20px;" />
         </td>
     </tr>
</table>

JavaScript

$('.headerlinkMenu').on('click', function () {
   
    $("body").css('overflow', 'hidden');
    
    $('#main_menu').animate({ 'width':'toggle', opacity: "toggle" }, 400,
       function () 
       {
           if ($('#main_menu').css('display') == "none") 
           {
               $(".headerlinkMenu").attr('src','Imagenes/buttonMenu2.png');
              //$("#parent_container").css('width', '100%');
           }
           else {
               $(".headerlinkMenu").attr('src', 'Imagenes/buttonMenu.png');
               //$("#parent_container").css('width', '80%');
           }

        $("body").css('overflow', 'auto');
           
       });
 });