2. 3.x Component Gallery
  3. Selectors

Selectors

Use a select input to toggle show/hide on content areas.

Select inputs allow you to use a simple form control such as a dropdown input to conveniently hide and show content in <divs>.

BBootstrap 3.x 

<div class="bootstrapr-selector">
   <!-- The input selector -->
   <form>
      <select class="form-control input-lg" id="selector-1001001">
         <option disabled="disabled" value="" selected="selected">
         SELECT
         </option>
         <option value="#content-div-1">Show section 1</option>
         <option value="#content-div-2">Show section 2</option>
         <option value="#content-div-3">Show section 3</option>
         <option value="#content-div-4">Show section 4</option>
      </select>
   </form>

   <!-- The content divs -->
   <div id="content-div-1" class="selector-content hidden">
      <p>This is the content for section 1</p>
   </div>
   <div id="content-div-2" class="selector-content hidden">
      <p>This is the content for section 2</p>
   </div>
   <div id="content-div-3" class="selector-content hidden">
      <p>This is the content for section 3</p>
   </div>
   <div id="content-div-4" class="selector-content hidden">
      <p>This is the content for section 4</p>
   </div>
</div>
<!-- bootstrapr-div -->

Custom CSS

Custom CSS is recommended to add marging and padding to the .

View all custom Bootstrapr.io CSS 
 .bootstrapr-selector > div {
    padding: 1rem;
 }

Required JS

Custom jQuery is required to hide and show the divs. Make sure to place the function inside a document.ready function. 

$("#selector-1001001").on("change", function() {
   $(".bootstrapr-selector div").addClass("hidden");
   var showDiv = $("#selector-1001001").val();
   $(showDiv).removeClass("hidden");
});

Notes