```js
$(document).ready(function () {
        $('.slideout-menu-toggle').on('click', function(event){
          event.preventDefault();
          // create menu variables
          var slideoutMenu = $('.slideout-menu');
          var slideoutMenuWidth = $('.slideout-menu').width();

          // toggle open class
          slideoutMenu.toggleClass("open");

          // slide menu
          if (slideoutMenu.hasClass("open")) {
            slideoutMenu.animate({
              left: "0px"
            }, 1000); 
          } else {
            slideoutMenu.animate({
              left: -slideoutMenuWidth
            }, 1000);  
          }
        });
    });

    $(document).ready(function () {
      $('.slideout-menu li').click(
          function() {
                $(this).children('.mobile-sub-menu').toggle("slow");
      });
    });
```

```css
.slideout-menu {
  position: absolute;
  top: 100px;
  left: -9999px;
  width: 100%;
  background: rgb(248, 248, 248);
  z-index: 1;
}

.slideout-menu .slideout-menu-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  display: inline-block;
  padding: 6px 9px 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  background: #222;
  color: #999;
  text-decoration: none;
  vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
  color: #fff;
}
.slideout-menu ul {
  list-style: none;
  font-weight: 300;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li {
  /*border-top: 1px solid #dddddd;*/
  border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li a {
  position: relative;
  display: block;
  padding: 10px;
  color: #999;
  text-decoration: none;
}
.slideout-menu ul li a:hover {
  background: #aaaaaa;
  color: #fff;
}
.slideout-menu ul li a i {
  position: absolute;
  top: 15px;
  right: 10px;
  opacity: .5;
}

.slideout-menu .mobile-sub-menu { 
    display:none; 
}

.mobile-sub-menu li:last-child {
  border-bottom:none;
}

.mobile-sub-menu {
}

.slideout-menu ul {
  margin-bottom:0;
  border-bottom:0;
}

.mobile-sub-menu li{
  padding-left:10px;
  background-color: #ffffff;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideout-menu">
    <ul>

      <li><a href="#">SUPPORT<i class="fa fa-arrow-right"></i></a>
        <ul class="mobile-sub-menu">
          <li><a href="#">Title1</a></li>
          <li><a href="#">Title2</a></li>
          <li><a href="#">Title3</a></li>
        </ul>
      </li>
      <li><a href="#">EDIT BOOK<i class="fa fa-arrow-right"></i></a>
        <ul class="mobile-sub-menu">
          <li><a href="#">NEW</a></li>
          <li><a href="#">BROWSE</a></li>
          <li><a href="#">APPROVAL</a></li>
        </ul>  
      </li>
    </ul>
  </div>

          <button type="button" class="navbar-toggle slideout-menu-toggle" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

```

The sub-item will pop-out when I click on main item.
There is a arrow icon on main item, What can I do to make it rotate when I click on it?

For example, the arrow is point to right, when I click on it the sub-item will show and arrow icon will point down.