The idea is make click on tag to display dropdown menu items

I have a bootstrap menu that is working fine, you can see the code below, but I want to display the dropdown submenu when I clicked each item in the menu.

For example, if I click on the about us item it doesn’t display anything, but when I click the plus sign on that item it displays the submenu.

Any suggest to figure out this functionality?

Thanks.

$(document).ready(function(){   
            

        if ($(window).width() < 980) {
          // mobile menu
          $('.hamburger').click(function (event) {
            $(this).toggleClass('h-active');
            $('.main-nav').toggleClass('slidenav');
          });

          $('.header-home .main-nav ul li  a').click(function (event) {
            $('.hamburger').removeClass('h-active');
            $('.main-nav').removeClass('slidenav');
          });
        }

        
        $(".main-nav .fl").on('click', function(event) {
          var $fl = $(this);
          $(this).parent().siblings().find('.submenu').slideUp();
          $(this).parent().siblings().find('.fl').addClass('flaticon-plus').text("+");       
          if($fl.hasClass('flaticon-plus')){
            $fl.removeClass('flaticon-plus').addClass('flaticon-minus').text("-");
          }else{
            $fl.removeClass('flaticon-minus').addClass('flaticon-plus').text("+");
          }
          $fl.next(".submenu").slideToggle();
        });

    }); 

.hamburger {
    position: relative;
    width: 40px;
    height: 30px;
    cursor: pointer;
    border: 5px solid transparent;
    float: right;
    margin-top: 35px
}
.hamburger span {
    width: 100%;
    height: 2px;
    background: #08509e;
    display: block;
    position: absolute;
    right: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.hamburger span.h-top {
    top: 0
}
.hamburger span.h-bottom {
    bottom: 0;
    width: 27px
}
.hamburger span.h-middle {
    top: 50%;
    margin-top: -1px;
    width: 25px
}
.hamburger.h-active span {
    width: 100%
}
.hamburger.h-active span.h-top {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1px
}
.hamburger.h-active span.h-middle {
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}
.hamburger.h-active span.h-bottom {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1px
}

.bottombar {
    background-color: #08509e
}
.main-nav>ul {
    padding: 0;
    margin: 0;
    list-style: none
}
.main-nav>ul>li {
    display: inline-block;
    position: relative;
    margin-left: -4px;
    padding-right: 15px
}
.main-nav>ul>li+li {
    padding: 0 15px
}
.main-nav>ul>li>a {
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 45px;
    font-size: 16px;
    position: relative;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.main-nav>ul>li:hover>a {
    color: #00b7d7
}
.submenu {
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #f7f7f7;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.submenu>li {
    display: block;
    margin: 0 -15px
}
.submenu>li a {
    display: block;
    padding: 10px 15px;
    color: #666;
    line-height: 1;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.submenu>li a:hover {
    background: #f7f7f7;
    color: #08509e
}
.main-nav .fl {
    width: 30px;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-style: normal;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 999;
    display: none
}
.main-nav .fl:before {
    font-size: 14px;
    text-align: center;
    line-height: 35px
}
.main-nav>ul>li+li .submenu {
    left: 25px
}
.main-nav>ul>li:hover .submenu {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
}
.content-block {
    padding: 70px 0;
    position: relative
}
.slideInUp {
    visibility: hidden;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    -moz-transform: translate3d(0, 30px, 0);
    -ms-transform: translate3d(0, 30px, 0);
    -o-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out
}
.is-active .slideInUp {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}
.slideInUp2 {
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s
}

@media (min-width:980px) {
    .hamburger {
        display:none;
    }
}
@media (max-width: 980px) {
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        padding: 20px;
        z-index: 99999;
        height: 100%;
        overflow: auto;
        background: #000;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateX(-250px);
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        transform: translateX(-250px);
        -webkit-transition: -webkit-transform .3s ease-in;
        -moz-transition: -moz-transform .3s ease-in;
        -o-transition: -o-transform .3s ease-in;
        transition: transform 0.3s ease-in
    }
    .main-nav.slidenav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
    .main-nav>ul {
        float: none
    }
    .main-nav>ul>li {
        display: block;
        padding: 0 !important;
        margin-left: 0
    }
    .main-nav>ul>li>a {
        font-size: 14px;
        color: #fff;
        line-height: 35px
    }
    .main-nav .fl {
        display: block;
        line-height: 35px
    }
    .submenu {
        position: static;
        min-width: 200px;
        background: transparent;
        border: none;
        padding: 5px 15px 5px 25px;
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        visibility: visible;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
        display: none
    }
    .submenu>li a {
        display: block;
        padding: 10px 0;
        color: #666;
        line-height: 0.8;
        font-size: 14px;
        color: #ccc;
        text-decoration: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all 0.3s
    }
    .submenu>li a:hover {
        background: transparent;
        color: #08509e
    }
    .slideInUp {
        visibility: visible;
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
        <span class="h-top"></span>
        <span class="h-middle"></span>
        <span class="h-bottom"></span>
    </a>
    
    <nav class="main-nav">
        <ul>
          <li>
            <a href="#">ABOUT US</a>
            <i class="fl flaticon-plus">+</i>
            <ul class="submenu">
              <li><a href="mission-statement.php">Mission Statement</a></li>
              <li><a href="participating-dentists.php">Participating Dentists</a></li>
              <li><a href="services.php">Services</a></li>
            </ul>          
          </li>
          <li>
            <a href="#">PATIENT</a> 
            <i class="fl flaticon-plus">+</i>           
            <ul class="submenu">
              <li><a href="medical-history-forms.php">Medical History Forms</a></li>
              <li><a href="before-surgery.php">Before Surgery</a></li>
              <li><a href="after-surgery.php">After Surgery</a></li>
              <li><a href="children-and-special-needs-adults.php">Children and Special Needs Adults</a></li>
              <li><a href="privacy.php">Privacy</a></li>
              <li><a href="rights-and-responsibilities.php">Rights and Responsibilities</a></li>
              <li><a href="financial-information.php">Financial Information</a></li>
            </ul>             
          </li>
          <li>
            <a href="javascript:void(0)">INFORMATION</a>
            <i class="fl flaticon-plus">+</i>
            <ul class="submenu">
              <li><a href="privileging-criteria.php">Privileging Criteria</a></li>
              <li><a href="privileging-board-members.php">Privileging Board Members</a></li>
              <li><a href="privileging-criteria.php#reqInfo">Request for Information</a></li>              
            </ul> 
          </li>
          <li><a href="map-and-directions.php">MAP &amp; DIRECTIONS</a></li>
          <li><a href="news.php">NEWS</a></li>
          <li><a href="employment.php">EMPLOYMENT</a></li>                  
          <li><a href="#">CONTACT US</a></li>
        </ul>
        <div class="mob-login hidden-lg">
          <a href="#" class="btn btn-outline">LOGIN</a>
        </div>
      </nav>

Answer

One method is to display + / - as :after pseudo element:

$(document).ready(function(){   
    if ($(window).width() < 980) {
      // mobile menu
      $('.hamburger').click(function (event) {
        $(this).toggleClass('h-active');
        $('.main-nav').toggleClass('slidenav');
      });

      $('.header-home .main-nav ul li  a').click(function (event) {
        $('.hamburger').removeClass('h-active');
        $('.main-nav').removeClass('slidenav');
      });
    }


    $(".main-nav .fl").on('click', function(event) {
      event.preventDefault();
      var $fl = $(this);
      $(this).parent().siblings().find('.submenu').slideUp();
/* begin change */
      $(this).parent().siblings().find('.fl').removeClass('open');       
      if($fl.hasClass('open')){
        $fl.removeClass('open');
      }else{
        $fl.addClass('open');
      }
/* end change */
      $fl.next(".submenu").slideToggle();
    });

});

.hamburger {
    position: relative;
    width: 40px;
    height: 30px;
    cursor: pointer;
    border: 5px solid transparent;
    float: right;
    margin-top: 35px
}
.hamburger span {
    width: 100%;
    height: 2px;
    background: #08509e;
    display: block;
    position: absolute;
    right: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.hamburger span.h-top {
    top: 0
}
.hamburger span.h-bottom {
    bottom: 0;
    width: 27px
}
.hamburger span.h-middle {
    top: 50%;
    margin-top: -1px;
    width: 25px
}
.hamburger.h-active span {
    width: 100%
}
.hamburger.h-active span.h-top {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1px
}
.hamburger.h-active span.h-middle {
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}
.hamburger.h-active span.h-bottom {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1px
}

.bottombar {
    background-color: #08509e
}
.main-nav>ul {
    padding: 0;
    margin: 0;
    list-style: none
}
.main-nav>ul>li {
    display: inline-block;
    position: relative;
    margin-left: -4px;
    padding-right: 15px
}
.main-nav>ul>li+li {
    padding: 0 15px
}
.main-nav>ul>li>a {
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 45px;
    font-size: 16px;
    position: relative;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.main-nav>ul>li:hover>a {
    color: #00b7d7
}
.submenu {
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #f7f7f7;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.submenu>li {
    display: block;
    margin: 0 -15px
}
.submenu>li a {
    display: block;
    padding: 10px 15px;
    color: #666;
    line-height: 1;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all 0.3s
}
.submenu>li a:hover {
    background: #f7f7f7;
    color: #08509e
}
/* begin change */
.main-nav .fl:after {
    content: "+"; 
    width: 30px;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-style: normal;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 999;
    display: none
}
.main-nav .fl.open:after {
  content: "-";
}
/* end change */
.main-nav .fl:before {
    font-size: 14px;
    text-align: center;
    line-height: 35px
}
.main-nav>ul>li+li .submenu {
    left: 25px
}
.main-nav>ul>li:hover .submenu {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
}
.content-block {
    padding: 70px 0;
    position: relative
}
.slideInUp {
    visibility: hidden;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    -moz-transform: translate3d(0, 30px, 0);
    -ms-transform: translate3d(0, 30px, 0);
    -o-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out
}
.is-active .slideInUp {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}
.slideInUp2 {
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s
}

@media (min-width:980px) {
    .hamburger {
        display:none;
    }
}
@media (max-width: 980px) {
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        padding: 20px;
        z-index: 99999;
        height: 100%;
        overflow: auto;
        background: #000;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateX(-250px);
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        transform: translateX(-250px);
        -webkit-transition: -webkit-transform .3s ease-in;
        -moz-transition: -moz-transform .3s ease-in;
        -o-transition: -o-transform .3s ease-in;
        transition: transform 0.3s ease-in
    }
    .main-nav.slidenav {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
    .main-nav>ul {
        float: none
    }
    .main-nav>ul>li {
        display: block;
        padding: 0 !important;
        margin-left: 0
    }
    .main-nav>ul>li>a {
        font-size: 14px;
        color: #fff;
        line-height: 35px
    }
    .main-nav .fl:after {
        display: block;
        line-height: 35px
    }
    .submenu {
        position: static;
        min-width: 200px;
        background: transparent;
        border: none;
        padding: 5px 15px 5px 25px;
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        visibility: visible;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
        display: none
    }
    .submenu>li a {
        display: block;
        padding: 10px 0;
        color: #666;
        line-height: 0.8;
        font-size: 14px;
        color: #ccc;
        text-decoration: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all 0.3s
    }
    .submenu>li a:hover {
        background: transparent;
        color: #08509e
    }
    .slideInUp {
        visibility: visible;
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
  <span class="h-top"></span>
  <span class="h-middle"></span>
  <span class="h-bottom"></span>
</a>
    
<nav class="main-nav">
  <ul>
    <li>
      <a href="#" class="fl">ABOUT US</a>
      <ul class="submenu">
        <li><a href="mission-statement.php">Mission Statement</a></li>
        <li><a href="participating-dentists.php">Participating Dentists</a></li>
        <li><a href="services.php">Services</a></li>
      </ul>          
    </li>
    <li>
      <a href="#" class="fl">PATIENT</a> 
      <ul class="submenu">
        <li><a href="medical-history-forms.php">Medical History Forms</a></li>
        <li><a href="before-surgery.php">Before Surgery</a></li>
        <li><a href="after-surgery.php">After Surgery</a></li>
        <li><a href="children-and-special-needs-adults.php">Children and Special Needs Adults</a></li>
        <li><a href="privacy.php">Privacy</a></li>
        <li><a href="rights-and-responsibilities.php">Rights and Responsibilities</a></li>
        <li><a href="financial-information.php">Financial Information</a></li>
      </ul>             
    </li>
    <li>
      <a href="javascript:void(0)" class="fl">INFORMATION</a>
      <ul class="submenu">
        <li><a href="privileging-criteria.php">Privileging Criteria</a></li>
        <li><a href="privileging-board-members.php">Privileging Board Members</a></li>
        <li><a href="privileging-criteria.php#reqInfo">Request for Information</a></li>              
      </ul> 
    </li>
    <li><a href="map-and-directions.php">MAP &amp; DIRECTIONS</a></li>
    <li><a href="news.php">NEWS</a></li>
    <li><a href="employment.php">EMPLOYMENT</a></li>                  
    <li><a href="#">CONTACT US</a></li>
  </ul>
  <div class="mob-login hidden-lg">
    <a href="#" class="btn btn-outline">LOGIN</a>
  </div>
</nav>