Effect in collapsible content on mobile

[CreatorTim]

Hi, when I click on any of my collapsible content on mobile, a gray rectangle briefly flashes, and after that it stays highlighted.

1. I want the gray rectangle to have rounded corners when I click on it, just like the collapsible content.
   
   

2. I only want the click effect to show, then the rectangle shouldn’t stay highlighted and visible, I want it just on click.

Hope that makes sense, I just want the click effect to appear, but not leave the highlighted rectangle there. Then, I want to round the corners of the rectangle. 

You can check it here: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to see the collapsible content section.)

ONLY ON MOBILE!

Thanks a lot,
Tim

[mageplaza-cs]

Hi @CreatorTim,

I am from Mageplaza - Shopify solution expert.

To meet your requirement, you need to modify the CSS rule that controls the hover behavior by adding:

.collapsible-content summary:hover {
    background: none;
}

Hope it is helpful to you.

Best regards

[CreatorTim]

Hey, I think it's not working, I only want the click effect to show, then the rectangle shouldn’t stay highlighted and visible, I want it just on click, then the effect shouldn't stay there

On this store it works the way I want it too: https://tomnoske.store/products/cinema-luts
Just scroll all the way down to the collaspible content section is there. (Check it on mobile device)

[azhar09]

Hi,

Thanks for the info!

I see what you're looking for — you want the click effect to appear, but then the rectangle shouldn’t stay highlighted after the click is finished. You’d like it to behave exactly like the effect on the store you shared.

To fix this, you’ll likely need to adjust both the CSS and Javascript:

1. CSS: Make sure the highlighted effect is only applied when the element is clicked (e.g., using the :active state).

2. JavaScript: Add a small script to remove the highlight effect after the click. This can be done by toggling a class or using a timeout to remove the effect shortly after it’s triggered.

[CreatorTim]

Hey, yes, you understood it correctly, and thanks for the advice, but I'm not very familiar with coding and such. So I’m not really sure how to do it, would you know? I’d really appreciate your help.

[ZestardTech]

Hello @CreatorTim ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.collapsible-row-layout .accordion summary {
    border-radius: 10px !important;
}

Let me know if you need further assistance!

[CreatorTim]

Hey, thanks, this works, but I still need help with one more thing:

When I click on it, there's a highlight effect, and the answer expands, but the highlight stays after that. How do I make it so that the highlight flashes only when clicked and doesn’t remain afterward?

Here’s my store where you can see it: https://1049xn-ya.myshopify.com/products/editing-masterclass

And here’s a store where it works exactly how I want: https://tomnoske.store/products/cinema-luts

Just scroll all the way down to the collaspible content section is there.

And only need this for mobile

Thanks a lot!

[ZestardTech]

Hello @CreatorTim ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.collapsible-content summary:hover {
    background: unset !important;
}

Let me know if you need further assistance!

[azhar09]

Thank you for providing the detailed steps to apply the necessary changes in my Shopify store. I appreciate the clarity and the easy-to-follow instructions you’ve outlined. I will go ahead and navigate to my Shopify Admin, locate the base.css file, and paste the code at the bottom as suggested.

It’s great to have a solution for modifying the border-radius of the accordion summary, and I’m confident this will help improve the layout of my store. I’ll implement the changes and will reach out to you if I run into any issues or require further assistance.

Additionally, I’ll keep your contact details handy in case I need help with any other app modifications or developments in the future. I’ll also consider liking and accepting your solution as a way to show appreciation for your support.

Thanks again, and I look forward to working with you if further customizations are needed.