I have a filter function for a portfolio gallery. It looks like this:

<script type="text/javascript">
    $(document).ready(function(){
        $('.filterlist').click(function(){
            const value = $(this).attr('speaker-filter');
            if (value == 'all'){
                $('.speakers-element').show('1000');
            }
            else{
                $('.speakers-element').not('.'+value).hide('1000');
                $('.speakers-element').filter('.'+value).show('1000');
            }
        })
        // add active class on selected item
        $('.filterlist').click(function(){
            $(this).addclass('active').siblings().removeClass('active');
        })
    })
</script>

The code is taken from this YouTube video: https://www.youtube.com/watch?v=ZjrqnxDEkzA

Now I would like to get a parameter from the URL (like ?section=film) to prefilter by URL. Unfortunately I didn't get it running until now, so I would be happy for any tips around that.

Thank you!

@Andreas: Sorry! I tried this code

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var value = getParameterByName('section');

I tried it before $(document).ready(function(){ and after that line (within this function), and in a separate <script></script>.

@ruleboy21: HTML: The buttons are done this way:

<div class="container">
 <ul>
  <li class="btn btn-sm filterlist active" speaker-filter="all">All</li>
  <li class="btn btn-sm filterlist" speaker-filter="section1">Section 1</li>
  <li class="btn btn-sm filterlist" speaker-filter="section2">Section 2</li>
 </ul>
</div>

The portfolio element has this code:

<div class="container">
 <div class="row is-flex speakers-line">
  <div class="section1 section2 col-sm-3 speakers-element" id="speakername">
     (Content)
  </div>
 </div>
</div>

This is the only CSS on speakers-element:

.speakers-element {
  padding-right: 1px !important;
  padding-left: 1px !important;
  margin-bottom: 1px;
}