FAQ Modules won't expand on Mobile, link to random page on website

[asmas92]

Hi there,

We have tried two FAQ Modules (Vast FAQ and Simple FAQ) on a landing page template (one built to look like our websited on another CMS) but each FAQ Module won't expand/drop down when clicked on in mobile. It works in HubSpot's preview, but on different smartphones it doesn't expand/drop down and instead takes the user to a different website page on our website.

Seeing as this is happening on two different modules from different providers, I'm guessing it's a page template issue. Any help would be greatly appreciated!

[himanshurauthan]

Hello @asmas92, thought to give it a shot.

So in my opinion it could be an issue due to jQuery.

HTML Code:

  <div class="accordion-wrap">

// for loop

<div class="faq-accordion">

        <div class="accordion-title active">

          

          <h6>

            Title here

          </h6>

          

          <div class=accordion__icon">

            icon here

          </div>

                

        </div>

        <div class="accordion-content" style="display: block;">

          <p><span>Content here</span></p>

        </div>

      </div>

</div>

JQuery Code:

$(".accordion__title").click(function(e){

    if($(this).hasClass('active')) {

    $(this).removeClass('active');

    $(this).siblings('.accordion__content').hide('slow');

  }

  else {

    $(this).parents('.accordion-wrap').find('.accordion__content').hide('slow');

    $(this).parents('.accordion-wrap').find('.faq-accordion .accordion__title').removeClass('active');

    $(this).siblings('.accordion__content').show('slow');

    $(this).addClass('active');

  }

  });

Module setting like this

I hope this works for you!

Regards,

[asmas92]

Hi @himanshurauthan ,

Thanks but this code does not work. Accordion does not render at all.

@Anton , do you have any solution for JQuery with your module?

Cheers

[Anton · Accepted solution]

Hi @asmas92, 

thanks for providing the preview link. I've checked it in the mobile view of chrome and couldn't reproduce that behavior. But - as I've tested it on my iPhone in Chrome it was working (or not) as you've described. After some more research I assume that it has nothing to do with jQuery or your FAQ module. It's your mobile menu which is invisible but still functional. Therefor when you scroll and click somewhere you click on the navigation link instead of the desired link. 

For testing purposes:

backup your "Medical_Assurance_Society_February2020-style.css" and search for this part

@media (max-width: 807px){
.hide-min {
    display: block !important;
}
}

after you've found it - comment it out like this

@media (max-width: 807px){
{# disabled due to issue X #}
/* .hide-min {
    display: block !important;
}
*/
}

save the file and test it on the page with a cache-clear-refresh so the whole page will be loaded. If this work, restore the part (or simply delete the comments), save and teset it again. If the issue occures again -> you're on the right track and it's a mobile navigation issue which has to be fixed. 

hope this helps, 

best, 

Anton

[asmas92]

Hi @Anton 

Thank you for following up again, you were on the right track and I've figured out it was one or two things: like you said, the menu was invisible but functional (which I resolved by changing it's position class to "absolute" rather than "fixed") and the mobile menu was infact bloated - it was not accurate, and heaps of content had been stuffed into it making it very long, which might have had an issue with the mobile menu length when opened.

I now deem this resolved. Thanks so much for your help!

[Anton]

Hi @asmas92, 

it could be an jQuery related issue. So maybe something is conflicting with something and therefore it doesn't work properly. 

Could you provide a preview link?

Also - you could create with almost no exerience your own custom accordion/FAQ module.

Here's an example(original code)

{% require_css %}
<style>
ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
  animation-delay: 1s;
}
ul li:last-of-type {
  padding-bottom: 0;
}
ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}
ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul li input[type=checkbox]:checked ~ p.itemContent {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
</style>
{% end_require_css %}
...
<div class="{{name|md5}}">
<h4>{{module.headline_above_accordion}}</h4>
<ul>
  {% for item in module.accordion_items %}
<li>
    <input type="checkbox" checked>
    <i></i>
    <p class="itemHeadline">{{ item.headline }}</p>
    <p class="itemContent">{{ item.content }}</p>
  </li>
{% endfor %}
</ul>
</div>

The module settings should look like this:

(don't forget to enable the repeater function in the accordion_items group). Also - you can add a lot more options to it. Like "do you want to have an image or a rich-text as content" with a few additional lines of code. 

hope this helps, 

best, 

Anton

[asmas92]

Hi Anton,

Thanks for your guidance on this. The page is located here: https://digital.mas.co.nz/kiwisaver-funds-test 

I've coded my own module using the code you've provided, which is the second "Useful Links" section you see on the page. It works just the same as the prior module (which is Simple FAQ) on desktop but the same issue occurs on mobile where the dropdown does not expand and takes me to a totally different page on the website. Any further thoughts on how to resolve this one?

Cheers!

[kvlschaefer]

Hi @asmas92,

Thanks for reaching out!

I would like to invite some experts from our community to our conversation.

Hi @Teun, @alyssamwilie, @Anton, @LMeert, @Kevin-C - Do you have any advice for @asmas92 on how they could fix this issue with the Vast Modules and the page template?

Thank you!

Best,
Kristen