JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="mainContent" class="container whtbg">
        <button class="btn btn-primary">Sample</button>
    <div class="row">
            <!-- Main columns -->
            <div class="col-sm-12 col-md-4" id="expandSubMenu1">
            <div class="samp">Column 1 - click me</div></div>
            <div class="col-sm-12 col-md-4">
            <div class="samp">Column 2</div></div>
            <div class="col-sm-12 col-md-4" id="expandSubMenu3">
            <div class="samp">Column 3 - click me</div></div>
            <div class="col-sm-12 col-md-4">
            <div class="samp">Column 4</div></div>
            <div class="col-sm-12 col-md-4" id="expandSubMenu5">
            <div class="samp">Column 5 - click me</div></div>
            <div class="col-sm-12 col-md-4">
            <div class="samp">Column 6</div></div>
        </div>
    </div>

    <!-- Sub-Menu for Column 1 -->
    <div id="subMenu1" class="container whtbg" style="display: none;">
        <button class="btn btn-primary backButton">Back</button>
        <div class="row">
            <div class="col-sm-12 col-md-4">
              <div class="samp">Sub 1-1</div>
            </div>
            <div class="col-sm-12 col-md-4">
              <div class="samp">Sub 1-2</div>
            </div>
            <div class="col-sm-12 col-md-4">
              <div class="samp">Sub 1-3</div>
            </div>
            <div class="col-sm-12 col-md-4">
              <div class="samp">Sub 1-4</div>
            </div>
            <div class="col-sm-12 col-md-4">
              <div class="samp">Sub 1-5</div>
            </div>
            <div class="col-sm-12 col-md-4">
            <div class="samp">Sub 1-6</div>
            </div>
        </div>
    </div>

    <!-- Sub-Menu for Column 3 -->
    <div...

CSS

.container {
    transition: transform 0.5s ease;
    position: absolute;
    width: 100%;
}

#mainContent {
    transform: translateX(0);
}

.hidden {
    display: block !important;
    transform: translateX(100%);
}

.showing {
    display: block !important;
    transform: translateX(0%);
}

.whtbg {
  background: white;
}

[class*="col-"] {
  padding: 10px;
}

.samp {
  display: flex;
  padding: 25px 20px;
  font-weight: normal;
  font-size: 20px;
  line-height: 24px;
  white-space: normal;
  justify-content: space-between;
  
  background: #fff;
  border-radius: 8px;
  display: flex;
  position: relative;
  
}

.container {
  overflow: hidden;
  background: pink;
  width: 100%;
  border: solid 1px #000;
  /* position: relative; */
}

.whtbg .col-sm-12 {
  cursor: pointer;
}

JavaScript

function toggleVisibility(showId, hideId) {
  const showElement = document.getElementById(showId);
  const hideElement = document.getElementById(hideId);

  // Ensure the show element is ready to slide in from the right
  showElement.classList.add('hidden');
  showElement.style.display = 'block';

  setTimeout(() => {
    // Start sliding in the show element
    showElement.classList.replace('hidden', 'showing');
    // Start sliding out the hide element
    hideElement.classList.add('hidden');
    hideElement.classList.remove('showing');
  }, 20); // Small timeout to allow CSS to apply 'hidden' positioning

  setTimeout(() => {
    // Fully hide the hide element after the transition is complete
    hideElement.style.display = 'none';
    hideElement.classList.remove('hidden');
  }, 500); // Matches the CSS transition time to ensure smooth visual change
}

document.getElementById('expandSubMenu1').addEventListener('click', function() {
  toggleVisibility('subMenu1', 'mainContent');
});

document.getElementById('expandSubMenu3').addEventListener('click', function() {
  toggleVisibility('subMenu3', 'mainContent');
});

document.getElementById('expandSubMenu5').addEventListener('click', function() {
  toggleVisibility('subMenu5', 'mainContent');
});

// Improved event handling for back buttons
document.querySelectorAll('.backButton').forEach(button => {
  button.addEventListener('click', function() {
    const parentSubMenu = this.closest('.container');
    toggleVisibility('mainContent', parentSubMenu.id);
  });
});