title: How to ensure that an accordion tab is open at all times but only one at once
body: <p>I'm quite new to code (also new to stackoverflow so i apologise if the format of this question is slightly incorrect, I'm just getting my head round it). I have an accordion that is almost working as intended. It only has two tabs, and when the other tab is opened the current one is closed which is correct. However, I want to ensure that one of the tabs is open at all times and also by default when the page loads, so when the page loads the first tab is already open. If i click on the second then the first one closes and the second opens. If i then click on the second again, it stays open, as one has to be open at all times. At the minute, on page load they are both collapsed and can be collapsed if you click on the current open tab. Below is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    function close_accordion_section() {
      $('.accordion .accordion-section-title').removeClass('active');
      $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
  
    $('.accordion-section-title').click(function(e) {
      var currentAttrValue = $(this).attr('href');
  
      if ($(e.target).is('.active')) {
        close_accordion_section();
      } else {
        close_accordion_section();
        $(this).addClass('active');
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
      }
  
      e.preventDefault();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.accordion,
  .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .accordion {
    overflow: hidden;
    border-radius: 5px;
    background: white;
  }
  
  .accordion-section-title {
    width: 100%;
    padding: 0px;
    display: inline-block;
    background: #585858;
    transition: all linear 0.15s;
    font-size: 14px;
    color: #F2F2F2;
  }
  
  .accordion-section-title.active,
  .accordion-section-title:hover {
    background: white;
    text-decoration: none;
    font-weight: bold;
    color: #585858;
  }
  
  .accordion-section:last-child .accordion-section-title {
    border-bottom: none;
  }
  
  .accordion-section-content {
    padding: 0px;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="accordion"&gt;
    &lt;div class="accordion-section"&gt;
      &lt;a class="accordion-section-title" href="#accordion-1"&gt;Accordion Section #1&lt;/a&gt;
  
      &lt;div id="accordion-1" class="accordion-section-content"&gt;
        &lt;p&gt;accordion 1 text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="accordion"&gt;
    &lt;div class="accordion-section"&gt;
      &lt;a class="accordion-section-title" href="#accordion-2"&gt;Accordion Section #2&lt;/a&gt;
  
      &lt;div id="accordion-2" class="accordion-section-content"&gt;
        &lt;p&gt;accordion 2 text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance!</p>