<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <button type="button" class="accordians">SEND SMS <span id="plus" class="pull-right"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></span><!--plus--> <span id="minus" class="pull-right" style="display: none;"><i class="glyphicon glyphicon-minus" aria-hidden="true"></i></span><!--minus--> </button> <div class="example-box-wrapper accordian_menu">dwdw </div> <!--changes2--> <!--changes3--> <button type="button" class="accordians">SEND EMAIL <span id="plus" class="pull-right"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></span><!--plus--> <span id="minus" class="pull-right" style="display: none;"><i class="glyphicon glyphicon-minus" aria-hidden="true"></i></span><!--minus--> </button> <div class="example-box-wrapper accordian_menu">dwdw </div> <!--changes3-->

<script> $(document).ready(function(){ $('.showcontent').hide(); $(".accordians").click(function(){ $(this).next().slideToggle(); $(".accordian_menu").not($(this).next()).slideUp(); }); }); </script>