-
-
Save misskillingsworth/824eca50297826c98ffd6d164281529a to your computer and use it in GitHub Desktop.
Create a collapsible page section
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
//Replace with ID of your collapsible page section | |
var toggleSection = $('#lp-pom-block-9'); | |
//Replace with ID of box containing hidden/visible content | |
var toggleContent = $("#lp-pom-box-16"); | |
//Replace with ID of button that toggles section | |
var toggleButton = $("#lp-pom-button-14"); | |
// Height of section to show/hide | |
var sectionHeight = $(toggleSection).height(); | |
//Top value of content | |
var toggleContentTop = toggleContent.position().top; | |
toggleSection.css("display", "none"); | |
toggleContent.css("display", "none"); | |
var otherSections = toggleSection.nextAll(); | |
var otherContent = toggleContent.siblings(); | |
console.log(otherContent); | |
var shown = false; | |
var moveStuff = function(){ | |
if(shown){ | |
for (var i=0;i<otherContent.length;i++){ | |
var content = $(otherContent[i]); | |
var contentTop = content.position().top; | |
//Is this element below toggleContent? | |
if( contentTop > toggleContentTop ){ | |
var newTopValue = contentTop + sectionHeight; | |
content.animate({top: "+=" + sectionHeight + "px"}, 600); | |
} | |
} | |
$("#lp-pom-root, #lp-pom-root-color-overlay").height(function (index, height) { | |
return (height - sectionHeight); | |
}); | |
shown = false; | |
}else{ | |
for (var i=0;i<otherContent.length;i++){ | |
var content = $(otherContent[i]); | |
var contentTop = content.position().top; | |
//Is this element below toggleContent? | |
if(contentTop > toggleContentTop ){ | |
var newTopValue = content.position().top - sectionHeight; | |
content.animate({top: "-=" + sectionHeight + "px"}, 600); | |
} | |
} | |
$("#lp-pom-root, #lp-pom-root-color-overlay").height(function (index, height) { | |
return (height - sectionHeight); | |
}); | |
shown = true; | |
} | |
} | |
//Run moveStuff to adjust content on load | |
moveStuff(); | |
toggleButton.click(function() { // ID of button/trigger | |
toggleSection.slideToggle('slow'); | |
toggleContent.slideToggle('slow'); | |
moveStuff(); | |
}); | |
/** | |
* Do not remove this section; it allows our team to troubleshoot and track feature adoption. | |
* TS:0002-03-059 | |
*/ | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment