title: How can I stop this CSS accordion from scrolling down automatically?
body: <p>I'm using an accordion made with CSS and jQuery for a site I'm making. The site also uses Bootstrap to style other parts of it.</p>
  
  <p>Every time I open or close a tab the page scrolls down automatically for some reason, what should I change? Thank you all in advance.</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() {
    $("a.accordion__trigger").click(function() {
      $(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.final__accordion {
    position: relative;
    display: block;
    border: 1px solid #e0e0e0;
    font-size: 0.8rem;
  }
  
  .final__accordion .accordion__item {
    display: block;
    margin-top: 5px;
  }
  
  .final__accordion .accordion__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    height: 0;
    -webkit-transition: height 1s ease, padding 0.3s linear;
    -o-transition: height 1s ease, padding 0.3s linear;
    transition: height 1s ease, padding 0.3s linear;
  }
  
  .final__accordion .accordion__content p {
    padding: 20px;
    margin: 0;
    text-align: left;
    max-width: initial;
  }
  
  .accordion__item .accordion__content {
    overflow: hidden;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
  }
  
  .final__accordion .accordion__content__hidden:target {
    /*CHANGED TARGET ON TOGGLE CLASSNAME*/
    height: 150px;
    text-align: left;
  }
  
  .accordion__content__hidden {
    height: 0;
  }
  
  .final__accordion .accordion__trigger {
    text-decoration: none;
  }
  
  .final__accordion .accordion__title {
    position: relative;
    display: block;
    margin: 0;
    padding: 10px;
    font-size: 1em;
    background-color: rgb(234, 10, 42);
    color: #FFFFFF;
    border: 1px solid red;
    cursor: pointer;
  }
  
  .final__accordion .accordion__title:hover {
    background-color: red;
  }
  
  .final__accordion .accordion__title:after {
    position: absolute;
    top: calc(50% - 12px);
    right: 20px;
    width: 15px;
    height: 15px;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    content: "";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="final__accordion" id="#accordion"&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab1" class="accordion__trigger accordion__title"&gt;Accordion 1&lt;/a&gt;
      &lt;div id="final__tab1" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab2" class="accordion__trigger accordion__title"&gt;Accordion 2&lt;/a&gt;
      &lt;div id="final__tab2" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab3" class="accordion__trigger accordion__title"&gt;Accordion 3&lt;/a&gt;
      &lt;div id="final__tab3" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab4" class="accordion__trigger accordion__title"&gt;Accordion 4&lt;/a&gt;
      &lt;div id="final__tab4" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab5" class="accordion__trigger accordion__title"&gt;Accordion 5&lt;/a&gt;
      &lt;div id="final__tab5" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion__item"&gt;
      &lt;a href="#final__tab6" class="accordion__trigger accordion__title"&gt;Accordion 6&lt;/a&gt;
      &lt;div id="final__tab6" class="accordion__content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>