JIT
Smooth expand and collapse animation
Log in
@pkpreethi96
When the button text is Collapse → The .cv-homepage-contentsec-headerwrap-rhs should expand to the right, hiding .cv-homepage-contentsec-navwrap with a smooth animation, occupying that space. When the button text is View All → It should shrink back, and .cv-homepage-contentsec-navwrap should reappear smoothly from the right.
DeepSeek V3

To implement this animation, I'll need to locate the relevant CSS/JS files controlling these elements. Let me search for them first.

I couldn't find any files containing the classes .cv-homepage-contentsec-headerwrap-rhs or .cv-homepage-contentsec-navwrap. Could you provide the file paths where these classes are defined or used?

@pkpreethi96
<div class="cv-homepage-contentsec-headerwrap-rhs center"> <div class="cv-homepage-contentsec-viewall" id="toggleViewBtn" aria-pressed="false">View All</div> <div class="cv-homepage-contentsec-navwrap center"> <div id="prevBtn" class="cv-homepage-contentsec-nav-leftbtn center tooltip-bottom cv-leftarr" tooltip-title="Previous" aria-disabled="true"></div> <div id="nextBtn" class="cv-homepage-contentsec-nav-rightbtn center tooltip-bottom cv-rightarr" tooltip-title="Next" aria-disabled="false"></div> </div> </div>
DeepSeek V3

Since I can't find the relevant CSS/JS files in the codebase, I'll need you to provide them or specify where they're located. Alternatively, you can share the CSS rules for these classes so I can help implement the animation behavior.

Would you like me to:

  1. Create a new CSS file with the animation styles
  2. Modify an existing file if you provide its path
  3. Implement the JavaScript toggle logic

Let me know which approach you prefer.

@pkpreethi96
.view-all .cv-homepage-contentsec-navwrap { transform: translateX(100%); opacity: 0; pointer-events: none; flex: 0 0 0; margin: 0; overflow: hidden; } .cv-homepage-contentsec-navwrap { border-radius: 60px; padding: 6px; gap: 6px; transition: transform 0.5s ease, opacity 0.5s ease, flex 0.5s ease; flex: 0 0 122px; overflow: hidden; } .cv-homepage-contentsec-viewall[aria-pressed="true"] { width: 264px; } .cv-homepage-contentsec-viewall{ width: 124px; transition: width 0.5s ease }
DeepSeek V3
Edit file

I'll create the CSS file with the animation styles since it doesn't exist yet. Here's the implementation:

Write file
Added CSS for expand/collapse animation
v1
@pkpreethi96
demo
DeepSeek V3

The CSS file has been created successfully with the animation styles. Here's what you need to do next:

  1. Link the CSS file in your HTML:<link rel="stylesheet" href="styles.css">`
  2. Add JavaScript to toggle the 'view-all' class on button click
  3. Update the button text between "Collapse →" and "View All"

Would you like me to implement any of these steps?`

@pkpreethi96
view-all is a parent class to rhs
DeepSeek V3

Got it! Based on your clarification, I'll adjust the CSS selectors to reflect that .view-all is a parent class of .cv-homepage-contentsec-headerwrap-rhs. Here's the updated CSS:

Edit file
Updated CSS for parent-child relationship
v2