Different Versions of jQuery in the Same Page

Another MicroPost. Sometimes there will be requirements to use multiple jQuery versions in the same page. Scenarios like cross browser compatibility, support an old jQuery plugin etc. This can be accomplished by changing the global jQuery variable and using $.noConflict() method. Hope following snippet is self explaining.

<!-- load jQuery 1.11.2 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  var old$ = $.noConflict(true);
</script>

<!-- load jQuery 2.1.3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
  var new$ = $.noConflict(true);
</script>

<script type="text/javascript">
  // Using jQuery 1.11.2
  console.log(old$.fn.jquery);

  // Using jQuery 2.1.3
  console.log(new$.fn.jquery);
</script>

Use this Plunker to play with this.

Angular.js Visible Toggle Button

From this post onward I am planning to blog more frequently with solutions for random issues I face along the day. These MicroPosts may not include much content, but will be direct and simplely answered solutions for issues. Hope these might save someone's time.

Not like jQuery, which has many toggle functions, As per my knowledge, Angular do not have any straight forward way to toggle the DOM. Many examples and fiddles I went through suggest unwanted coding stuff. I am not going to write a controller for a simple thing like this. Finally found a solution which worth mentioning. Hope following snippet is self explaining.

<button ng-model="isVisible"
        ng-init="isVisible = false" 
        ng-click="isVisible = !isVisible">
        {{ isVisible ? "Hide Section" : "Show Section"}}
</button>

<div ng-show="isVisible">
  <!-- content -->
</div>