Collapsible FAQ works in editing mode, but not public view

Site URL: http://www.myartbeatflorals.com

I recently watched a tutorial on how to create a collapsible/accordion FAQ page. Worked great...except I just discovered it does not appear as collapsible when I visit my website as a visitor would...on desktop or mobile. In edit/dashboard mode, it works as it should.

Here is the code I used:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

And a portion of the customized markdown code I used:

### **HOW LONG WILL IT TAKE FOR MY FLOWERS TO BE MADE?**
While this depends on how many items you order, I typically request a minimum of 8 weeks to complete your flowers. My calendar always fills up quickly each month, so the earlier you book, the better!
<hr>
### **HOW FAR IN ADVANCE CAN I ORDER MY FLOWERS?**
Everything I create is either wood, silk, fabric, dried, or naturally preserved. This means you can order several months in advance without worrying about wilting or decay! Just keep the flowers in a dry, cool place out of moisture and direct sunlight, and your arrangements can last for years!
<hr>

8 hours ago, Ashelle said:

Site URL: http://www.myartbeatflorals.com

I recently watched a tutorial on how to create a collapsible/accordion FAQ page. Worked great...except I just discovered it does not appear as collapsible when I visit my website as a visitor would...on desktop or mobile. In edit/dashboard mode, it works as it should.

Here is the code I used:

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

 

And a portion of the customized markdown code I used:

### **HOW LONG WILL IT TAKE FOR MY FLOWERS TO BE MADE?**
While this depends on how many items you order, I typically request a minimum of 8 weeks to complete your flowers. My calendar always fills up quickly each month, so the earlier you book, the better!
<hr>
### **HOW FAR IN ADVANCE CAN I ORDER MY FLOWERS?**
Everything I create is either wood, silk, fabric, dried, or naturally preserved. This means you can order several months in advance without worrying about wilting or decay! Just keep the flowers in a dry, cool place out of moisture and direct sunlight, and your arrangements can last for years!
<hr>

 

 

 

Hi. I just reviewed your website and it working

@creedon that worked, thanks!

On 5/7/2021 at 7:06 AM, Ashelle said:

@creedon that worked, thanks!

I see the site has some small problems. Do you want to fix these?

Site URL – https://www.myartbeatflorals.com/

1. (Tablet-About) Increase this content width?

2. (Tablet-Gallery) Increase page content width?

3. (Tablet-FAQ) Increase page width?

4. (Tablet-Contact) Want to stacked image/text?

On 5/9/2021 at 5:18 AM, tuanphan said:

I see the site has some small problems. Do you want to fix these?

Sure, if you can give me the exact codes lol. It takes me forever to find the right coding, and I've kinda let the tablet view go by the wayside.

On 5/11/2021 at 2:50 AM, Ashelle said:

 

Add to Design > Custom CSS

/* Tablet issues */
@media screen and (max-width:900px) and (min-width:641px) {
/* about */
section#abouttheowner .span-8 {
    width: 90% !important;
}
section#abouttheowner .row:nth-child(3)>.span-2 {
    width: 5%;
}
/* gallery */
div#page-5f985ef048d47c0f1b88d8ff .span-4 {
    width: 100%;
}
/* faq */
div#page-5f99ecafc45d762a233943c0 .span-6 {
    width: 80%;
}
div#page-5f99ecafc45d762a233943c0 .span-3 {
    width: 10%;
}
/* contact */
div#page-5f9b27cc4b9fdf5da3b9bb13>.row>.span-6 {
    width: 100%;
}
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

 

I pasted all that and it didn't seem to change anything. 

On 5/12/2021 at 10:36 PM, Ashelle said:

I pasted all that and it didn't seem to change anything. 

Remove above & add this to Settings > Advanced > code Injection > header

<style>
  /* Tablet issues */
@media screen and (max-width:900px) and (min-width:641px) {
/* about */
section#abouttheowner .span-8 {
    width: 90% !important;
}
section#abouttheowner .row:nth-child(3)>.span-2 {
    width: 5%;
}
/* gallery */
div#page-5f985ef048d47c0f1b88d8ff .span-4 {
    width: 100%;
}
/* faq */
div#page-5f99ecafc45d762a233943c0 .span-6 {
    width: 80%;
}
div#page-5f99ecafc45d762a233943c0 .span-3 {
    width: 10%;
}
/* contact */
div#page-5f9b27cc4b9fdf5da3b9bb13>.row>.span-6 {
    width: 100%;
}
}
</style>

9 hours ago, tuanphan said:

Remove above & add this to Settings > Advanced > code Injection > header

Perfect! Thanks so much!

Hi @Ashelle,

I see that you may have used some custom code to try to create an accordion on your site and it caused some unexpected issues. I see that they may have been fixed. For future reference, I'm happy to say it is now possible to add an accordion to your site without additional code using the accordion block! We have some information about the possibilities and customizations of the accordion block in our guide "Accordion blocks" should you want to take a look.