jQuery - show/hide events

Monkeypatch jQuery to dispatch events on show/hide.

HTML

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>

<div clas="ui-show-hide">
	<a href="javascript: void(0)" class="ui-show-hide-link">Примеры РЭС и ВЧУ, подлежащих лицензированию:</a>
  <ul class="ul ui-show-hide-content">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
<div>
  
  
<div clas="ui-show-hide">
	<p class="ui-show-hide-link">Примеры РЭС и ВЧУ, подлежащих лицензированию222222222:</p>
  <ul class="ul ui-show-hide-content">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
<div>

CSS

.ui-show-hide-content {
   display: none;
 }
 .ui-show-hide-link {
   position: relative;
 }
 .ui-show-hide-link:after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";   /* font-family: "Font Awesome 5 Pro"; */
  font-weight: bold; /* font-weight: 300; */
  width: 12px;
  height: 12px;
  position: absolute;
  top: 5px;
  transition-duration: 0.3s;
  line-height: 12px;
 }
 .ui-show-hide-link-active:after {
   transform: rotate(180deg);
 }

JavaScript

$( document ).ready(function() {
    $('.ui-show-hide-link').click(function(){
       $(this).siblings('.ui-show-hide-content').toggle(200);
       $(this).toggleClass('ui-show-hide-link-active');
    })(jQuery);
});