Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Collapsible FAQ works in editing mode, but not public view


Ashelle
Go to solution Solved by creedon,

Question

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>

 

 

 

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

The first time I loaded the page there was no collapsing going on. The second time I loaded the page I could see the collapsing effect. I wonder if this is yet another case of the curse of Ajax L

@creedon that worked, thanks!

9 answers to this question

Recommended Posts

  • 1

The first time I loaded the page there was no collapsing going on. The second time I loaded the page I could see the collapsing effect.

I wonder if this is yet another case of the curse of Ajax Loading. Could you try turning off Ajax Loading to see if the problem goes away?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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

Link to post
  • 0
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?

myartbeatflorals.com-01-min.png

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

myartbeatflorals.com-02-min.png

3. (Tablet-FAQ) Increase page width?

myartbeatflorals.com-03-min.png

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

myartbeatflorals.com-04-min.png

Link to post
  • 0
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.

 

Link to post
  • 0
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%;
}
}

 

Link to post
  • 0
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>

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...