Skip to content

Instantly share code, notes, and snippets.

@SJ-James
Created March 14, 2018 01:14
Show Gist options
  • Save SJ-James/60c3f9a57042410e232420f4ea933812 to your computer and use it in GitHub Desktop.
Save SJ-James/60c3f9a57042410e232420f4ea933812 to your computer and use it in GitHub Desktop.
Add a 'Collapse Section' button to the Elementor Editor
<?php
//Add to functions.php in child theme
function e_collapse_sections(){
?>
<!-- Scripts and styles should enqueued properly but for the sake of having it all in one function...-->
<script>
if ( self !== top ) { // Check if we're in a preview window / iframe
jQuery(document).ready(function($){
$("<li class='elementor-editor-element-setting elementor-editor-element-collapse' title='Collapse Section'><i class='eicon-v-align-bottom' aria-hidden='true'></i><span class='elementor-screen-only'>Duplicate Section</span></li>").appendTo("#elementor ul.elementor-editor-element-settings");
if (typeof(localStorage) == 'undefined') {
document.getElementById("result").innerHTML =
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
$(".elementor-section").each(function(i, el) {
if (localStorage['collapse_state' + i] == 'collapsed') {
$(this).addClass('collapsed');
}
});
}
$('.elementor-editor-element-collapse').on('click', function() {
var $item = $(this).closest('.elementor-section');
var index = $('.elementor-section').index($item);
$item.toggleClass('collapsed');
if ($item.hasClass('collapsed')) {
console.log(index)
localStorage.setItem('collapse_state' + index, 'collapsed');
} else {
localStorage.removeItem('collapse_state' + index);
}
});
});
}
</script>
<style>
.elementor-editor-active #elementor .elementor-section.collapsed {
max-height: 20px;
margin: 20px;
overflow: hidden;
padding: 30px 0;
border-radius: 5px;
transition: .5s height;
}
.elementor-editor-active #elementor .elementor-section.collapsed:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg,#41c9f4,#71d7f7);
}
.elementor-editor-active #elementor .elementor-section.collapsed ul.elementor-editor-element-settings {
top: auto;
bottom: 0;
border-radius: 4px 4px;
}
</style>
<?php
}
add_action( 'wp_footer', 'e_collapse_sections' ); // Is there a better hook? I couldn't find one.
@lqqkr
Copy link

lqqkr commented Sep 2, 2020

Is there somewhere i can see this in action?
Im building a small site for a restaurant and they want their menus shown online. I would like to collapse each menu until tapped on. Will this code do that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment