tab vertical select box

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
  $(function() {
    $('#custom-tab-select').change(function() {
      $('.pr__tabs__content').hide();
      $('#' + $(this).val()).show();
    });
  });

</script>


<select id="custom-tab-select">
  <option value="reviews">Reviews</option>
  <option value="qas">Q&amp;As</option>
  <option value="specs">Specs</option>
  <option value="sausages">Sausages</option>
</select>







<div class="pr__tabbed-content" id="tabs-dropdown">

  <div class="pr__tabs--container" id="product_additional_details_container">

    <ul class="pr__tabs">

      <li class="pr__tabs__li pr__tabs__li__selected" id="reviewTab">
        <a href="" class="pr__view fill" data-content="reviews">Reviews</a>
      </li>

      <li class="pr__tabs__li " id="questionAnswerTab">
        <a href="" class="pr__view fill" data-content="qas">Q&amp;As</a>
      </li>

      <li class="pr__tabs__li " id="specsTab">
        <a href="#product_additional_details_container" class="pr__view fill" data-content="specs">Spec<span class="sm-hide">ifications</span></a>
      </li>

      <li class="pr__tabs__li " id="specsTab">
        <a href="#product_additional_details_container" class="pr__view fill" data-content="sausages">Sausages</a>
      </li>

    </ul>


    <div class="pr__tabs__content pr__tabs__content--show" id="reviews">

      <div id="rating_link_anchor"></div>
      <div id="BVRRContainer">
        <p>Reviews</p>
        <ul id="BVSEOSDK_meta">
          <li data-bvseo="sdk">bvseo_sdk, java_sdk, bvseo-4.0.0</li>
          <li data-bvseo="sp_mt">CLOUD, getReviews, 10ms</li>
          <li data-bvseo="ct_st">REVIEWS, PRODUCT</li>
          <li data-bvseo="ms">bvseo-msg: The resource to the URL or file is currently unavailable.;</li>
        </ul>
      </div>

    </div>

    <div...

CSS

#custom-tab-select {
  display: none;
}

@media screen and (max-width: 600px) {

  #custom-tab-select {
    display: block;
  }

  .pr__tabs {
    display: none;
  }

}