slideToggle for popup menu

Question

I want to slide the popup menu and add rotate class by using this variable. Now rotate class append successfully. But I also need to slide the popupMenu ul.

$("[class*='popup']").click(function() {
     $(this).find('span.glyphicon').toggleClass('rotate');
     $(this).find("[class='poper']").slideToggle();
})

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.popupMenu1, .popupMenu2, .popupMenu3{
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<p class="popup1">
    <span class="glyphicon glyphicon-triangle-right" id="arrow1">    </span>Services
    <ul class="poper popupMenu1">
        <li><a href="#">Product Engineering</a></li>
        <li><a href="#">Enterprise Solutions</a></li>
        <li><a href="#">Independent Testing Services</a></li>
        <li><a href="#">Digital Transformation</a></li>
        <li><a href="#">Infrastructure &amp; Application Support</a></li>
        <li><a href="#">Business Intelligence</a></li>
        <li><a href="#">Oracle Applications</a></li>
        <li><a href="#">Big Data Analytic</a></li>
    </ul>
</p>
<p class="popup2">
    <span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions
    <ul class="poper popupMenu2">
        <li>
            <a href="#">Auras</a>
            <br>
            <a href="#">Tapshop</a>
            <br>
            <a href="#">Temenos AFIS</a>
            <br> 
        </li>
        <li>
            <a href="#">MPoS</a>
            <br>
            <a href="#">Techcello</a>
            <br>
        </li>
    </ul>
</p>
<p class="popup3">
    <span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries
    <ul class="poper popupMenu3">
        <li>
            <a href="#">Independent Software Vendors</a>
            <br>
            <a href="#">Healthcare</a>
            <br>
        </li>
        <li>
            <a href="#">Retail</a>
            <br>
            <a href="#">Education</a>
            <br>
        </li>
        <li>
            <a href="#">Media and Publishing</a>
            <br>
            <a href="#">Insurance and Financial Services</a>
            <br>
        </li>
    </ul>
</p>
<p class="popup">
    <span class="glyphicon glyphicon-none"></span>Digital
</p>
<p class="popup">
    <span class="glyphicon glyphicon-none"></span>Perspectives
</p>
<p class="popup">
    <span class="glyphicon glyphicon-none"></span>About
</p>

Answer 1

Replace $(this).find("[class='poper']").slideToggle(); with

  var nextUl=$(this).next();
  if(nextUl.is('ul')) nextUl.slideToggle();

See find("[class='poper']") didn't work because putting lists in a paragraph element is forbidden by HTML standards, and some browsers(all?) put the ul outside the p element. Relevant: ul element can never be a child of p element

$("[class*='popup']").click(function(){    
  var nextUl=$(this).next();
  if(nextUl.is('ul')) nextUl.slideToggle();
})

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.popupMenu1,.popupMenu2,.popupMenu3{
display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services
       <ul class="poper popupMenu1">
      <li><a href="#">Product Engineering</a></li>
      <li><a href="#">Enterprise Solutions</a></li>
      <li><a href="#">Independent Testing Services</a></li>
      <li><a href="#">Digital Transformation</a></li>
      <li><a href="#">Infrastructure &amp; Application Support</a></li>
      <li><a href="#">Business Intelligence</a></li>
      <li><a href="#">Oracle Applications</a></li>
      <li><a href="#">Big Data Analytic</a></li>
    </ul></p>
      <p class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions
        <ul class="poper popupMenu2">
                            <li>
                                <a href="#">Auras</a>
                                <br>
                                <a href="#">Tapshop</a>
                                <br>
                                <a href="#">Temenos  AFIS</a>
                                <br> 
                            </li>
                            <li>
                                 <a href="#">MPoS</a>
                                <br>
                                <a href="#">Techcello</a>
                                <br>
                            </li>
                        </ul></p>
      <p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries
         <ul class="poper popupMenu3">
                            <li>
                                <a href="#">Independent Software Vendors</a>
                                <br>
                                <a href="#">Healthcare</a>
                                <br>
                            </li>
                            <li>
                                <a href="#">Retail</a>
                                <br>
                                <a href="#">Education</a>
                                <br>
                            </li>
                            <li>
                                <a href="#">Media and Publishing</a>
                                <br>
                                <a href="#">Insurance and Financial Services</a>
                                <br>
                            </li>


                        </ul></p>
      <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p>
      <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p>
      <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p>