Build a custom toggle function for reuse in jQuery

Hiee there, I come up with some handy toggle function which can be used in your project with all customisation…so you can customise this accordingly. Build a custom toggle function for reuse in all toggle functionality.

 

Check out the live example in fiddle

https://jsfiddle.net/shakalya/a35mgrwt/

 

<script type=”text/javascript”>
$(document).ready(function(){
var contentToggle = $(“.shaky-toggle”);
contentToggle.each(function() {
$(this).on(‘click’,function(){
var toggle_id = $(this).attr(‘data-target’);
$(toggle_id).slideToggle();
});
});
});
</script>

Now what does this do??

add a class ‘shaky-toggle’ to create a button for toggle …and the put a class value inside an attribute data-target=’ ‘ which you want to toggle show and hide.

like in this case i am taking ‘hidden-division’.

so HTML codes will be

<button class=’shaky-toggle’  data-target=”.hidden-division”>TOGGLE</button>

<div class=”hidden-division”>
<li>DUMMY TEXT TO TOGGLE</li>
<li>DUMMY TEXT TO TOGGLE</li>
<li>DUMMY TEXT TO TOGGLE</li>
<li>DUMMY TEXT TO TOGGLE</li>
</div>

Leave a Comment