Dawn - Hide The Arrow SVG for Product Accordion Row

[IllIlIl1]

Is it possible to hide the SVG arrow icon in a specific accordion row? I would like to set display: none for the SVG arrow icon in the last accordion row, ensuring that the arrow-icon does not appear for the last row only.

Reference Image:

https://imgur.com/a/WOHiI38

--

Store Link: https://6c34c9-d3.myshopify.com/products/t-shirt-test

Password: yewsto

[Tech_Coding · Accepted solution]

Hello @IllIlIl1 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  details#Details-collapsible_tab_FfF9da-template--17664770146483__main svg {
      display: none !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Tech_Coding · Accepted solution]

Hello @IllIlIl1 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  details#Details-collapsible_tab_FfF9da-template--17664770146483__main svg {
      display: none !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[IllIlIl1]

Thanks! Is also possible to add a border radius to the bottom left and bottom right corners of the last accordion row? I’d like to have a border radius applied specifically to the bottom corners of that row.

[Tech_Coding]

@IllIlIl1 
Add this

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product__accordion.accordion:last-of-type {
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
  }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Huptech-Web]

Hi @IllIlIl1 

To hide the arrow

Go to component-accordion.css

Add below code

details:last-child svg.icon.icon-caret {
    display: none !important;
}

 Thank you 

D.P.

[BSSCommerce-B2B · Accepted solution]

@IllIlIl1,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before </body>

<style>
#Details-collapsible_tab_FfF9da-template--17664770146483__main icon.icon-caret {
  display: none!important
}
<style>

Result:

Hope it helps 😍

[IllIlIl1]

Thanks! Is also possible to add a border radius to the bottom left and bottom right corners of the last accordion row? I’d like to have a border radius applied specifically to the bottom corners of that row. 

[BSSCommerce-B2B]

@IllIlIl1 , yes this is your code

<style>
.product__accordion.accordion:last-of-type{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}
</style>

Result: 

[Rahul_dhiman]

Hello @IllIlIl1 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

details#Details-collapsible_tab_FfF9da-template--17664770146483__main svg {
display: none !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks