Skip to content

Instantly share code, notes, and snippets.

@benjclark

benjclark/example of reusable show hide js component.html

Last active November 30, 2020 14:31
Show Gist options
  • Save benjclark/38aa77cb8ae8d5f22f816033f2d1ed38 to your computer and use it in GitHub Desktop.
Save benjclark/38aa77cb8ae8d5f22f816033f2d1ed38 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example of reusable show hide js component.html
<body>
<!--Start-->
<!--This is an example of a snippet of html that you have in a file that Intercooler will ajax in some time after page has fully loaded-->
<!--All you need to do is add the two data attributes as seen below, 1 on the element wrapping the clickable html and 1 on the element wrapping the word that should toggle-->
<!--You only need to define the below script with each snippet (file) rather than duplicating all the show hide logic each time-->
<script>
Intercooler.ready(function(rootElement) {
window.showHide(rootElement.find('[data-toggle-show-hide]'));
});
</script>
<div>
<a href="#data_image" class="small align-top mr-4 metadata-link" data-toggle="collapse">
<span class="fas fa-table"></span>
<span data-toggle-show-hide><span data-toggle-show-hide-word>Show</span> metadata</span>
</a>
</div>
<!--End-->
<!--Start-->
<!--This script needs to be loaded only once and should be loaded on the initial page load before any AJAX starts happening so put it in your top level html file / template-->
<script>
window.showHide = function(clickableElement) {
var clickEl = clickableElement;
var wordEl = '[data-toggle-show-hide-word]';
$(document).ready(function() {
clickEl.click(function() {
var text = $(this).find(wordEl).text();
$(this).find(wordEl).text(text === 'Show' ? 'Hide' : 'Show');
});
});
}
</script>
<!--End-->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment