user3386779 user3386779 - 5 months ago 17
Javascript Question

change the graphical icon for popup menu

I want to change the graphical icon for popup menu > to ^ .When popup submenu is visible It need to change as^ and when it is not visible it need to be in >.



$(document).ready(function() {
$('.popup1').click(function(){
$('.popupMenu1').slideToggle();
})
$('.popup2').click(function(){
$('.popupMenu2').slideToggle();
})
$('.popup3').click(function(){
$('.popupMenu3').slideToggle();
})
});

.popupMenu1,.popupMenu2,.popupMenu3{
display:none;
}
.popup1,.popup,.popup2,.popup3{
cursor:pointer;

}
.popupMenu1 > li >a,.popup,.popupMenu2 > li >a,.popupMenu3 > li >a{


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
<p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
<ul class="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 class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
<ul class="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 class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
<ul class="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 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>
</div>




Answer

Just add class in CSS and add transform property with rotate-90deg and whenever click happens you can toggle that class on glyphicon. Below I've added extra rotate class and toggling that class.

$(document).ready(function() {
  $('.popup1').click(function() {
    $(this).find('span.glyphicon').toggleClass('rotate');
    $('.popupMenu1').slideToggle();
  })
  $('.popup2').click(function() {
    $(this).find('span.glyphicon').toggleClass('rotate');
    $('.popupMenu2').slideToggle();
  })
  $('.popup3').click(function() {
    $(this).find('span.glyphicon').toggleClass('rotate');
    $('.popupMenu3').slideToggle();
  })
});
.popupMenu1,
.popupMenu2,
.popupMenu3 {
  display: none;
}
.popup1,
.popup,
.popup2,
.popup3 {
  cursor: pointer;
}
.popupMenu1 > li >a,
.popup,
.popupMenu2 > li >a,
.popupMenu3 > li >a {} .rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
  <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
  <ul class="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 class="popup2"><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
  <ul class="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 class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
  <ul class="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 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>
</div>