How to set borderBottomRadius='15px' when I toggle hide?

When the white part of the section is open, the bottom radius is round and nice.
radius-round

Until I unfold the section, the bottom radius becomes sharp and NOT very favorable. How to set borderBottomRadius=‘15px’ when hiding the bottom part of the section like “Please Help!!”?
radius-sharp

I have tried my best to search for solutions and I really found one as below.
ht tps://forums.ankiweb.net/t/custom-javascript-toggle-button-not-working-and-unsure-why/17345

BUT! The problem is that I really know nothing about styling, I would really appreciate it if you styling MASTERS can help me solve the problem!!

Here is the apkg.
ht tps://gofile.io/d/GbJWCX

(Please delete the space between ht & tps to access 'cause there came out a dialogue telling me that I can’t post links. Sorry for the inconvenience! )

The easiest approach for such collapsibles is to give the common parent element a border-radius. Go to the .section rule and you’ll see that there’s already a 10px border radius set.

Why doesn’t it work then? Well, by default the children will simply overflow the parent and nothing happens, even though the border of the parent is rounded.

We need to tell the browser how to handle overflow on your .section elements. Simply insert overflow: hidden into the CSS rule:

.section {
  overflow: hidden; /* <- this will fix your issue */
  color: #414141;
  etc ...
}

Side note: Your Styling section contains HTML and JavaScript (i.e. stuff wrapped in <style> and <script> tags). These will not have any effect - you can simply delete everything that isn’t CSS - almost half of the content.

5 Likes

Thanks a lot! YOU ARE FANTASTIC!!
It’s so elegant and worked like a charm!!
And thank you sincerely for the side note I’ll give it a try!