Search code examples
javascriptjquerycssflip

flipbox overlap with eachother after jquery show/hide

I have a problem with flipboxes developed in Avada WordPress theme, I'm trying to hide some flipboxes from the page and display it when user clicks a link.

The jQuery functions are working normal, only when the content appears again it has wrong CSS values and if I try to inspect elements the CSS values reloads itself and the problem become fixed. I tried to change min-height but didn't work, any help is appreciated.

Solution

  • Instead hiding #more-locations-div div by display:none, try height:0; overflow:hidden

    jQuery("#more-locations-div").css("height", "0").css("overflow", "hidden");
jQuery("#loadmorebtn").on("click" ,function(){jQuery("#loadmorebtn").remove();jQuery("#more-locations-div").css("height", "auto");});