Conflict with collapse/expand script

  • Resolved jorgonfla

    (@jorgonfla)


    1 year, 10 months ago

    I use in thousands of pages of my website a script to expand/collapse contents and at the bottom I also have as a widget your newsletter subscription entry field.
    When contents are expanded (via clicking on a button using a click event listener) the contents display properly but then when clicking to collapse what was expanded the pages scroll to the bottom to your email subscription entry field and a tooltip saying “Please fill out this field” pops up.
    This behavior basically ruins the user experience on every single page where I have collapsible contents.

    Any ideas as to how I can either disable the “required” to fill the field behavior or stop the conflict?

    The script I use for expand/collapse is this:

    var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var collapsedcontent = this.nextElementSibling;
    if (collapsedcontent.style.maxHeight){
      collapsedcontent.style.maxHeight = null;
    } else {
      collapsedcontent.style.maxHeight = collapsedcontent.scrollHeight + "px";
    } 
  });
}
    • This topic was modified 1 year, 10 months ago by jorgonfla.
    • This topic was modified 1 year, 10 months ago by jorgonfla.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Brian Mutende

    (@picocodes)

    Share a link to the page so that we can take a closer look at this.

    Thread Starter jorgonfla

    (@jorgonfla)

    https://fashionmall.online/bvlgari-serpenti-spiga-brown-ceramic-rose-gold-diamonds

    I believe it does it only when an user is logged in you can simply create an account and see the problem. For users not logged in it does not happen.

    You can see the problem when you click on the burgundy bars one says:

    “Learn mode about this item (click here)

    the other says:

    “Learn more about BVLGARI (click here)

    If you click them you will see the text deployed and when you click to collapse it again it takes you to the bottom entry field from your plugin and pops the tooltip.

    I use collapsible texts in thousands of pages just like that example.

    I have right click disabled but you can simply see the source code if you need to…

    • This reply was modified 1 year, 10 months ago by jorgonfla.
    Plugin Author Brian Mutende

    (@picocodes)

    The URL you’ve linked to is down.

    I believe there’s a JS conflict between Noptin and one of your snippets.

    Check your browser console after clicking on the close button and let me know what error you see.

    Thread Starter jorgonfla

    (@jorgonfla)

    Nothing was down ever in my site, I own a massive server co-located in a tier III facility and it gets monitored thousands to times a day, it has never ever been down neither has any page unless I am doing major changes which I was not at the time.

    I ended up removing the widget pointing to your mini form to solve the issue and instead I am using your form in a popup using your settings and system and wow, I did not know how fantastic your system is, congrats!

    I was using it in a very basic way but your plugin is far more powerful than I thought. I setup a popup form to trigger after scrolling over 35% of any page instead and it is working beautifully.

    Now my question is different, I have a copy of that popup form I am trying to call from a menu item.

    I tried to add filters to call a shortcode from the menu with no success,

    How can I call your shortcode or popup form from a menu item?

    As a reference for the example the menu item would be 2668 and the noptin form is 25663 so the shortcode would be [noptin-form id=25663].

    .

    Plugin Author Brian Mutende

    (@picocodes)

    Hi @jorgonfla,

    Your site’s still not loading from my end.

    Open the popup form editor, click on Settings > Trigger settings the select “Click trigger” from the popup.

    Next, enter your menu’s CSS selector in the CSS selector field then save your changes.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Conflict with collapse/expand script’ is closed to new replies.