davy_yg
10 months ago

Show and Hide arrow using JS

Posted 10 months ago by davy_yg

Hello,

I am trying to show arrowd and hide arrow when showing the submenu but I have not been successful yet. And the opposite.

Any clue why?

Please review my code below.

navigation.blade.php

<div id="Pages">    
    <li class="nav-item {{ (Request::segment(1) == 'dashboard') ? 'active' : '' }}" data-toggle="tooltip" data-placement="right" title="">
      <a class="nav-link" href="#subPages" data-toggle="collapse" class="collapsed">
        
        <i class="fa fa-table"></i>
        <span  class="nav-link-text">Dashboard</span>
        <span id="arrow"><i class="fa fa-angle-right"></i></span>
        <span id="arrowd"><i class="fa fa-angle-down"></i></span>
      </a>
    </li>
    </div>

    <div id="subPages">
    <li class="nav-item-sub {{ (Request::segment(1) == 'dashboard-thxh') ? 'active' : '' }}" data-toggle="tooltip" data-placement="right" title="">
      <a class="nav-link" href="{{ url('/dashboard-thxh') }}">
        <i class="fa fa-fw fa-table"></i>
        <span class="nav-link-text">Dashboard TRX Harian</span>
      </a>
    </li>

    <li class="nav-item-sub {{ (Request::segment(1) == 'dashboard-thxhpromo') ? 'active' : '' }}" data-toggle="tooltip" data-placement="right" title="">
      <a class="nav-link" href="{{ url('/dashboard-thxhpromo') }}">
        <i class="fa fa-fw fa-table"></i>
        <span class="nav-link-text">Dashboard TRXH PROMO</span>
      </a>
    </li>
    </div>


<script>

$(function() {
$( "#Pages" ).click(function(e) {

    if(!$('#Pages').hasClass('subPages')) {
        $('#Pages').addClass('subPages');
        $('#Pages').addClass('arrowd');
        $('#Pages').removeClass('arrow');
    } else {
        $('#Pages').removeClass('subPages');        
        $('#Pages').removeClass('arrow');
        $('#Pages').addClass('arrowd');        
    }

});

</script>

Please sign in or create an account to participate in this conversation.