rwp

.summary-item:hover .summary-content { opacity: 1 !important; }  

.gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !important; -moz-transition: opacity 1600ms ease-in-out !important; -o-transition: opacity 1600ms ease-in-out !important; } .gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{ transition: opacity 1400ms ease-in-out !important; -webkit-transition: opacity 1400ms ease-in-out !important; -ms-transition: opacity 1400ms ease-in-out !important; -moz-transition: opacity 1400ms ease-in-out !important; -o-transition: opacity 1400ms ease-in-out !important; } Currently getting some hiccups with Firefox.  This is on SquareSpaces side of things.  I already spent about 3 hours trying to get this to work, and I don't feel like digging though a million lines of code again.  (The standard transition doesn't work right in Firefox either, its just too fast to notice).
Anyway, this works with every other browser that I tested. I added 1000ms to the default values, I am not sure if the 200ms differences matter much, but I left them. You can probably leave out the importants, and honestly, you don't need the webkits, but I guess if someone is on a very old browser its good to toss them in there.
I will attempt to get this over to SS to see if they can fix the Firefox issue.  It fades sometimes, snaps the next, not sure whats up.

Thank you so much @rwp I toggled between using your code for the product description and using https://www.kayleighnoele.com/blog/how-to-install-a-faq-dropdown-accordion-in-squarespace for the original coding to create the drop down. It really does work! Thank you

I think I will set min-height for title ☺️

Thank you so much! That worked!

block-b3f224c6c3725d7d5022 is a spacer block, so it's probably working, just on the wrong element.
Which image are you trying to hide?

.top-bun, .bottom-bun { height: 3px !important; border: 2px solid #ababab; border-radius: 3px; }  

I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background.
This will work. Replace this line:
#block-yui_3_17_2_1_1600516236805_10107 h3 { With this:
#block-a89aabdb6864ee5ef820 h3 {  

Hey thanks that worked a treat!

@media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07a2ef3145"] { display: none !important; } }  

@media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07a2ef3145"] { display: none !important; } }  

OK, I was finally able to figure this out with youtubes API.
I have a client that requested something similar, so I had to really get into this......
https://codepen.io/r-w-p/pen/KKzeVmb
Currently not working 100% in firefox, you have to click play to get it to start working. Not sure whats up with that yet.
Edit: fixed on firefox...... I hope.....

Hi @Khushk
Use our free extension! It doesn't need code knowledge. Install and make your accordion in minutes. You can change fonts, colors, paddings, margins and etc... without coding!
Check this video after 3 m.
 
Download it from here: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf
Installation guide: https://www.ixstudio.net/ninjakit/installation-guide
Please use the like button if it helps you!
Best,
Leopold

#block-yui_3_17_2_1_1599495604788_125794 a { color: blue !important; } #block-yui_3_17_2_1_1599495604788_125794 a:hover { color: red !important; }  

#block-yui_3_17_2_1_1599495604788_125794 a { color: blue !important; } #block-yui_3_17_2_1_1599495604788_125794 a:hover { color: red !important; }  

This is the only info I found.
I have never attempted to do any of this, but I think its your only option.
https://support.squarespace.com/hc/en-us/articles/206566687-Exporting-your-site

Try this. Design -> CSS
.ProductItem-details .sqs-block.code-block.sqs-block-code { order: 4; }  

Edit this code
<script>$('section.ProductItem-details').html( $('section.ProductItem-additional').html() ); $('section.ProductItem-additional').html('');</script> to this
<script> jQuery(document).ready(function($) { $('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt'); }); </script>

If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps.
 
 
 If this helps you, please click "Like" below  ⬇️

Thanks rwp your a champ it worked perfectly.

@birdmade Apparently squarespace uses a few different layouts for the categories.
This one is more complex, with the items and sub items. Head to my codepen and check out "Product Cat to Dropdown Alternate".
This will only work with the parent categories and will ignore the sub items. Drop me an email if you would like me to dig into this deeper.

@birdmade whats the link to your page?
Edit, just noticed, this needs to be one line, without the > after script
<script src=.....................................></script>

You left your code in, correct?
Here's how it looks on mine with the addition of the code I supplied above:
 

legend! thank you 🙂
 

You will need to follow the instructions for adding jquery.
You will also need to put in the URL for the other image.
var topIMG = $(".Header-branding-logo").attr("src"); var sclIMG = ""; $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".Header-branding-logo").attr("src", sclIMG); else $(".Header-branding-logo").attr("src", topIMG); });