<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="container"> <div class="well well-sm"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <label for="selectedSort">Sort:</label> <div class="input-group" id="adv-search"> <input id="selectedSort" type="text" class="form-control" placeholder="Sort" /> <div class="input-group-btn"> <div class="btn-group" role="group"> <div class="dropdown dropdown-lg"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" > <i class="fa fa-caret-down"></i> </button> <ul class="dropdown-menu dropdown-menu-right no-margin" > <li><a href="#nogo" onclick="document.getElementById('selectedSort').value='Invoice Date'">Invoice Date</a></li> <li><a href="#nogo" onclick="document.getElementById('selectedSort').value='Company'">Company</a></li> <li><a href="#nogo" onclick="document.getElementById('selectedSort').value='Status'">Status</a></li> </ul> </div> <button type="button" class="btn btn-default" onclick="switchIcon()" style="min-width: 80px;"> <span id="sortDescIcon" class="pull-left" style="displey: inline-block;"><i class="fa fa-sort-amount-desc"></i> Desc</span> <span id="sortAscIcon" class="pull-left" style="display:none;"> <i class="fa fa-sort-amount-asc"></i> Asc</span> </button> </div> </div> </div> </div> </div> </div> </div> </div>

.input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

function switchIcon() { var descIcon = document.getElementById('sortDescIcon'); var ascIcon = document.getElementById('sortAscIcon'); if(descIcon && descIcon.style.display == 'none') { descIcon.style.display = 'inline-block'; } else { descIcon.style.display = 'none'; } if(ascIcon && ascIcon.style.display == 'none') { ascIcon.style.display = 'inline-block'; } else { ascIcon.style.display = 'none'; } }