Cacher is the code snippet organizer for pro developers

<div class="acc-wrap">
  <div class="acc-type-wrapper">
    <select name="acc-changer" id="accordion-changer">
      <option  value="no-val">Select A Val</option>
      <option value="default-acc">Default</option>
      <option value="collapse-acc">Collapsible Close</option>
      <option value="collapse-o-acc">Collapsible Open</option>
    </select>
    <span class="selected-text">You Selected:- <span class="selected-value"></span></span>
  </div>
  <div class="acc-wrapper">
    <div class="acc-item">
      <div class="acc-item-header">H1</div>
      <div class="acc-item-detail" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus explicabo incidunt sint. Numquam voluptatum voluptatibus unde doloribus, doloremque architecto consectetur, consequuntur nemo dicta cumque quae consequatur pariatur beatae id dolor!</div>
    </div>
    <div class="acc-item">
      <div class="acc-item-header">H1</div>
      <div class="acc-item-detail" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus explicabo incidunt sint. Numquam voluptatum voluptatibus unde doloribus, doloremque architecto consectetur, consequuntur nemo dicta cumque quae consequatur pariatur beatae id dolor!</div>
    </div>
    <div class="acc-item">
      <div class="acc-item-header">H1</div>
      <div class="acc-item-detail" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus explicabo incidunt sint. Numquam voluptatum voluptatibus unde doloribus, doloremque architecto consectetur, consequuntur nemo dicta cumque quae consequatur pariatur beatae id dolor!</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery(document).ready(function($) {
    f4();
    var abc=$('.acc-wrapper').html();
    $('#accordion-changer').on('change', function(){
      $('.acc-item').remove();
      $('.acc-wrapper').html(abc);
      $('.acc-item-detail').slideUp();
      $('.acc-item').removeClass('active');
      var selectedVal=$(this).val();
      var selecttext=$('#accordion-changer option:selected').text();
      $('.selected-value').text(selecttext).css({
        'color': '#ffffff',
        'font-weight': 'bold'
      });;
      if(selectedVal=="default-acc"){
        defaultFun();
      }
      else if(selectedVal=="collapse-acc"){
      f2();
      }
      else if(selectedVal=="collapse-o-acc"){
      f3()
      }
      else{
        f4();
      }
    });
  });

    function defaultFun(){
      $('.acc-item-header').on('click', function(){
        $(this).parent('.acc-item').toggleClass('active');
        $(this).siblings('.acc-item-detail').slideToggle();
      });
    }

    function f2(){
       $('.acc-item-header').on('click', function(){
       if($(this).parent().hasClass('active')){
        $(this).parents('.acc-item').toggleClass('active');
        $(this).siblings('.acc-item-detail').slideToggle();
      }
      else{
        $('.acc-item-detail').slideUp();
        $(this).siblings('.acc-item-detail').slideDown();
        $('.acc-item').removeClass('active');
        $(this).parent('.acc-item').addClass('active');
      }
    });
    }

    function f3(){
    $('.acc-item-header').on('click', function(){
       if($(this).parent().hasClass('active')){
        $(this).siblings('.acc-item-detail').slideDown();
      }
      else{
        $('.acc-item-detail').slideUp();
        $(this).siblings('.acc-item-detail').slideDown();
        $('.acc-item').removeClass('active');
        $(this).parent('.acc-item').addClass('active');
      }
    });  
    }

    function f4(){
       $('.acc-item-header').on('click', function(){
         $('.selected-value').text("Please choose any option first").css({
          'color': '#f49342',
          'font-weight': 'bold'
        });;
       });
    }

    .acc-type-wrapper {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #dddddd;
  background-color: #6943bfe3;
  margin-bottom: 10px;
}
.acc-type-wrapper select {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  height: 35px;
  margin-bottom: 10px;
}
.selected-value {
  color: #ffffff;
  font-size: 14px;
}
.acc-wrap {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  padding: 10px;
  background-color: #f0dfff;
}
.acc-item {
  background-color: #dabcff;
  margin-bottom: 5px;
  border-radius: 5px;
  color: #6d3e9d;
}
.acc-item-header {
  padding: 10px;
  cursor: pointer;
  position: relative;
}
.acc-item-header::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background-color: transparent;
  right: 10px;
  top: 14px;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  transform: rotate(45deg);
}
.acc-item.active .acc-item-header::after{
  transform: rotate(45deg);
  border-top: 0;
  border-left: 0;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}
.acc-item-detail {
  padding: 10px;
  color: #b78ae6;
  font-size: 15px;
  line-height: 20px;
  text-shadow: 0 0 0;
}
.selected-text{
  color:#ffffff;
}