Tailwind how to show div on click when device is small-CodePudding

I have simple 2 divs. When device is small on second div is showing with menu icon. What I want is when I click on menu button the first div should appear as overflow/sidepopup

I also created a tailwind play link

CodePudding user response：

First, you can start the solution by giving the sidebar a certain width. Then you need to ensure that the sidebar is present as a block on large screens, but 40 units to the left on small screens (40 = sidebar width). After all, you can clarify this problem with a simple javascript code by giving the button an id to the sidebar. Hope it helps, happy new year :)

Please review the code on the full page.

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div >
    <!-- hidden w-full md:block md:w-auto -->
    <div  id="navbar-default">

      <div  data-collapse-toggle="navbar-default">
        <div >
          <div >
            <div >
              <div >

                <div >
                  <div >
                    john
                  </div>
                  <div >
                    hye
                  </div>
                </div>
              </div>
              <div >
                <div >
                  24may
                </div>

              </div>
            </div>
            <div ></div>
          </div>
        </div>

      </div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div >
        <div>
          <div >
            <div >
              <div id="button"  data-bs-target="navbar-d">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
              </div>
              <img src="{{data[activeMsgIndex].userImage}}" >
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $("#button").click(function() {
      $("#navbar-default").toggleClass('!ml-0')
    });
  </script>
</body>

</html>

CodePudding user response：

This answer involves inclusion of javascript to trigger event on press of menubutton.

Steps to follow:

Design the desired overflow/side popup as you have mentioned in the question and by default hide it.
When menu button is clicked, make the overflow/side popup show, by unhidding the component.