Blog, Website & Page Publishing

asmas92
Participante

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

resolver

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!

0 Avaliação positiva
1 Solução aceita
Anton
Solução
Autoridade no assunto | Parceiro
Autoridade no assunto | Parceiro

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

resolver

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

Anton Bujanowski Signature

Exibir solução no post original

7 Respostas 7
himanshurauthan
Autoridade no assunto | Parceiro Elite
Autoridade no assunto | Parceiro Elite

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

resolver

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

Design Manager _ HubSpot.png

 

I hope this works for you!

 

Regards,

Digital Marketing & Inbound Expert In Growth Hacking Technology
asmas92
Participante

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

resolver

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
Solução
Autoridade no assunto | Parceiro
Autoridade no assunto | Parceiro

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

resolver

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

Anton Bujanowski Signature
asmas92
Participante

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

resolver

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!

0 Avaliação positiva
Anton
Autoridade no assunto | Parceiro
Autoridade no assunto | Parceiro

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

resolver

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:

Anton_0-1653322783944.png

(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

Anton Bujanowski Signature
asmas92
Participante

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

resolver

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!


0 Avaliação positiva
kvlschaefer
Gerente da Comunidade
Gerente da Comunidade

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

resolver

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !