I utilized Bootstrap 3 to create a menu with additional options. When the "More Options" button is clicked, it reveals more buttons and ends with a "Less Options" button, hiding the "More Options" button. The reverse happens when the "Less Options" button is clicked.
I was able to achieve this functionality using jQuery script and HTML code. My question is: is there a more built-in method in Bootstrap 3 to accomplish these outcomes? I faced difficulties implementing this feature using data-toggle="collapse" which Bootstrap 3 provides.
jQuery script:
$("#moreOptionsButton").click(function(){
$("#moreOptionsButton").hide();
$("#extraMenu").show();
});
$("#lessOptionsButton").click(function(){
$("#moreOptionsButton").show();
$("#extraMenu").hide();
});
HTML code:
<div class="menuButton" id="moreOptionsButton">
<div class="row">
<button class="col-xs-offset-1 col-xs-10 btn btn-lg">
<span><i class="glyphicon glyphicon-chevron-down"></i> More Options</span>
</button>
</div>
</div>
<div id="extraMenu" class="collapse">
<div class="menuButton">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 btn btn-lg">
<span><i class="glyphicon glyphicon-star"></i> Location</span>
</div>
</div>
</div>
<div class="menuButton">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 btn btn-lg">
<span class=""><i class="glyphicon glyphicon-star"></i> Contact</span>
</div>
</div>
</div>
<div class="menuButton" id="lessOptionsButton">
<div class="row">
<button class="col-xs-offset-1 col-xs-10 btn btn-lg">
<span class=""><i class="glyphicon glyphicon-chevron-up"></i> Less Options</span>
</button>
</div>
</div>