Skip to content

Instantly share code, notes, and snippets.

@benjclark

benjclark/show-hide-jquery.html

Last active November 23, 2020 21:17
Show Gist options
  • Save benjclark/c0e89c26a385dbfb9815245427589f02 to your computer and use it in GitHub Desktop.
Save benjclark/c0e89c26a385dbfb9815245427589f02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
show-hide-jquery.html
<body>
<div>
<a href="#data_image" class="small align-top mr-4 metadata-link" data-toggle="collapse">
<span class="fas fa-table"></span>
<!--Put the below data attribute on every word (wrapped in span) you want to toggle "Show" and "Hide"-->
<span data-toggle-show-hide><span data-toggle-show-hide-word>Show</span> metadata</span>
</a>
</div>
<!--Always put your ui scripts just before closing of body tag-->
<script>
var clickEl = '[data-toggle-show-hide]';
var wordEl = '[data-toggle-show-hide-word]';
$(document).ready(function() {
$(clickEl).each(function(){
$(this).click(function(){
var text = $(this).find(wordEl).text();
$(this).find(wordEl).text(text === 'Show' ? 'Hide' : 'Show');
});
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment