Which file contains this HTML snippet? Do you have an existing JavaScript file for handling this toggle, or should I add inline script to the HTML?
What is the path to the CSS file where I should add these animation styles?
.toggle-animation.css
.cv-homepage-contentsec-headerwrap-rhs { overflow: hidden; transition: all 0.3s ease; }
.cv-homepage-contentsec-viewall { width: 122px; transition: width 0.3s ease; cursor: pointer; }
.cv-homepage-contentsec-viewall.toggled { width: 264px; }
.cv-homepage-contentsec-navwrap { position: absolute; right: 0; top: 0; transition: transform 0.3s ease; }
.cv-homepage-contentsec-headerwrap-rhs.toggled .cv-homepage-contentsec-navwrap { transform: translateX(142px); /* Hide to the right by the difference in width */ }
.cv-homepage-contentsec-headerwrap-rhs.toggled { width: 264px; /* Adjust wrapper width as needed */ }
#viewall { width: 122px; transition: width 0.3s ease; cursor: pointer; }
#viewall.toggled { width: 264px; }
.navwrap { transition: transform 0.3s ease; }
.toggled .navwrap { transform: translateX(142px); }
.wrapper { transition: width 0.3s ease; width: 122px; }
.wrapper.toggled { width: 264px; }
What kind of alternate solution do you want? (e.g., JavaScript toggle instead of CSS, or different animation approach?)
What part isn't working? Can you share the file path or more details?
JavaScript to toggle the class (add to your JS file or inline in HTML):
const toggleBtn = document.getElementById('toggleViewBtn');
const rhsWrapper = document.querySelector('.cv-homepage-contentsec-headerwrap-rhs');
toggleBtn.addEventListener('click', () => {
rhsWrapper.classList.toggle('toggled');
});
const toggleBtn = document.getElementById('toggleViewBtn');
const rhsWrapper = document.querySelector('.cv-homepage-contentsec-headerwrap-rhs');
toggleBtn.addEventListener('click', () => {
rhsWrapper.classList.toggle('toggled');
});
Link the new CSS file and add this JS to your existing setup. Adjust widths or transforms as needed for layout.