Jump to content

Can someone please help me with code to add an accordion of FAQs in our Store (V 7.0)

Go to solution Solved by tuanphan,

Recommended Posts

  • 3 weeks later...

You can add this code to last line in Website > Website Tools (under Not Linked) > Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
});
</script>

image.thumb.png.556c27f6f71fd9fcaa0140bc142c6bcc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, tuanphan said:

You can add this code to last line in Website > Website Tools (under Not Linked) > Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
});
</script>

 

Thanks @tuanphan!

I've added that code and the accordion block does indeed now appear on the Workshops at Bluebird House page.

I now have 2 more questions:

  1. Is there a way to make it so that it DOESN'T also appear in the footer on all other pages?
  2. Is there a way to bring the "Workshop FAQs" text block onto the Workshops at Bluebird House with the accordion block?

Thank you so much for your help!!

Edited by BluebirdBirdy
Link to comment
On 11/8/2023 at 5:07 PM, BluebirdBirdy said:

Thanks @tuanphan!

I've added that code and the accordion block does indeed now appear on the Workshops at Bluebird House page.

I now have 2 more questions:

  1. Is there a way to make it so that it DOESN'T also appear in the footer on all other pages?
  2. Is there a way to bring the "Workshop FAQs" text block onto the Workshops at Bluebird House with the accordion block?

Thank you so much for your help!!

#1. Add this code to Website Tools > Custom CSS

div#footerBlocks .accordion-block {
	display: none !important;
}
#productList ~ .accordion-block {
	display: block !important;
}

#2. 

You mean this text?

image.png.7b5a1c7b26673f60c36ef4e24474323a.png

Use this new code

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
    $('div#footerBlocks div#block-yui_3_17_2_1_1699262170562_36898').insertBefore('#productList ~ .accordion-block');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/10/2023 at 7:42 PM, tuanphan said:

You mean this text?

Yes - thank you @tuanphan! The "Workshop FAQs" text block is now visible on the Workshops at Bluebird House page - hooray!

You have helped me get everything almost right... One final request now (thank you for your patience):

Is there a way to make the "Workshop FAQs" text block NOT visible in the footer on all other pages?

Link to comment

Add this code to Website > Page > Website Tools > CUSTOM CSS

/* Hide Workshop FAQ text */
div#block-yui_3_17_2_1_1699262170562_36898 {
	display: none !important;
}
#productList ~ div#block-yui_3_17_2_1_1699262170562_36898 {
	display: block !important;
}

 

Edited by tuanphan
updated new code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, tuanphan said:

Add this code to Website > Page > Website Tools > CUSTOM CSS

/* Hide Workshop FAQ text */
div#block-yui_3_17_2_1_1699262170562_36898 {
	display: none !important;
}
#productList div#block-yui_3_17_2_1_1699262170562_36898 {
	display: block !important;
}

 

Thank you!

Small issue... this has indeed hidden the text in the footer BUT it has also hidden it on the Workshop page too.

Any suggestions?

Screen Shot 2023-11-19 at 5.08.21 pm.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.