Skip to content

Instantly share code, notes, and snippets.

@misskillingsworth
Forked from noahub/collapsible_section.js
Last active January 20, 2018 17:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save misskillingsworth/824eca50297826c98ffd6d164281529a to your computer and use it in GitHub Desktop.
Save misskillingsworth/824eca50297826c98ffd6d164281529a to your computer and use it in GitHub Desktop.
Create a collapsible page section
<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