'I need help to make my jQuery menu behave

I'm learning jQuery. I've made a menu system from a tutorial I found.

This is the code.

$(function() {
    $('div.tab-panel ul.tabs li').on('click', function() { // Clicks on any tab
        $(this).siblings().removeClass('active');
        $(this).toggleClass('active');
        var $panel = $('#'+$(this).attr('rel'));
        if($panel.hasClass('active')){
            $panel.slideUp(500,function(){
                $panel.removeClass('active');
            });
        } else {
            console.log('not active');
            if($panel.siblings('.active').length > 0){
                $panel.siblings('.active').slideUp(500,function(){
                    $panel.siblings('.active').removeClass('active',show_panel());
                });
            } else {
                show_panel();
            }
            function show_panel(){
                $panel.slideDown(500,function(){
                    $panel.addClass('active');
                });
            }
        }
    });
});

body {
    background  : #fafafa;
    font-family : Helvetica, Arial, sans-serif;
    color       : #333333;
}
div.tab-panel ul.tabs {
    margin  : 0;
    padding : 0;
}
div.tab-panel ul.tabs li {
    list-style-type : none;
    display         : inline-block;
    background      : #999999;
    margin          : 0;
    padding         : 3px 10px;
    border-radius   : 4px 4px 0 0;
    color           : #ffffff;
    font-weight     : 200;
    cursor          : pointer;
}
div.tab-panel ul.tabs li:hover {
    color      : #ffffff;
    background : #666666;
}
div.tab-panel ul.tabs li.active {
    color      : #ffffff;
    background : #666666;
}
div.tab-panel div.panel {
    display       : none;
    background    : #c9c9c9;
    padding       : 30px;
    border-radius : 0 0 4px 4px;
}
div.tab-panel div.panel.active {
    display : block;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>tab-panel</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="tab-panel">
        <ul class="tabs">
            <li rel="panel_1">panel 1</li>
            <li rel="panel_2">panel 2</li>
            <li rel="panel_3">panel 3</li>
            <li rel="panel_4">panel 4</li>
        </ul>
        <div>
            <div id="panel_1" class="panel">
                content 1<br/>
                content 1<br/>
                content 1<br/>
                content 1<br/>
                content 1<br/>
            </div>
            <div id="panel_2" class="panel">
                content 2<br/>
                content 2<br/>
                content 2<br/>
                content 2<br/>
                content 2<br/>
            </div>
            <div id="panel_3" class="panel">
                content 3<br/>
                content 3<br/>
                content 3<br/>
                content 3<br/>
                content 3<br/>
            </div>
            <div id="panel_4" class="panel">
                content 4<br/>
                content 4<br/>
                content 4<br/>
                content 4<br/>
                content 4<br/>
            </div>              
        </div>
    </div>
</body>
</html>

Here is a repl of it working: https://tab-panel--computinginschools.repl.co/

The problem is that if you click quickly on one tab and then another, both panels open. How can I prevent this?

Solution 1:^[1]

Try this.

$(document).ready(function() {
    $('li#panel_1').click(function() { 
      $('.content1').toggle("fast");
        $('.content2').hide();
         $('.content3').hide();
           $('.content4').hide();
    });
    
     $('li#panel_2').click(function() { 
      $('.content2').toggle("fast");
       $('.content1').hide();
         $('.content3').hide();
           $('.content4').hide();
     });

     $('li#panel_3').click(function() { 
      $('.content3').toggle("fast");
        $('.content2').hide();
         $('.content1').hide();
           $('.content4').hide();
    });
    
     $('li#panel_4').click(function() { 
      $('.content4').toggle("fast");
       $('.content2').hide();
         $('.content3').hide();
           $('.content1').hide();
    
    });
       
      
});

body {
    background  : #fafafa;
    font-family : Helvetica, Arial, sans-serif;
    color       : #333333;
}
div.tab-panel ul.tabs {
    margin  : 0;
    padding : 0;
}
div.tab-panel ul.tabs li {
    list-style-type : none;
    display         : inline-block;
    background      : #999999;
    margin          : 0;
    padding         : 3px 10px;
    border-radius   : 4px 4px 0 0;
    color           : #ffffff;
    font-weight     : 200;
    cursor          : pointer;
}
div.tab-panel ul.tabs li:hover {
    color      : #ffffff;
    background : #666666;
}
div.tab-panel ul.tabs li.active {
    color      : #ffffff;
    background : #666666;
}
div.tab-panel div.panel {
    display       : none;
    background    : #c9c9c9;
    padding       : 30px;
    border-radius : 0 0 4px 4px;
}

.content1 .conten2 .content3 .content4 {
    display:none;
    }

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <div class="tab-panel">
        <ul class="tabs">
            <li id="panel_1">panel 1</li>
            <li id="panel_2">panel 2</li>
            <li id="panel_3" >panel 3</li>
            <li id="panel_4" >panel 4</li>
        </ul>
        <div>
               <div class="content1 panel">
                content 1<br/>
                content 1<br/>
                content 1<br/>
                content 1<br/>
                content 1<br/>
               </div>
               <div class="content2 panel">
                content 2<br/>
                content 2<br/>
                content 2<br/>
                content 2<br/>
                content 2<br/>
                </div>
              <div class="content3 panel">
                content 3<br/>
                content 3<br/>
                content 3<br/>
                content 3<br/>
                content 3<br/>
            </div>
               <div class="content4 panel">
                content 4<br/>
                content 4<br/>
                content 4<br/>
                content 4<br/>
                content 4<br/>

            </div>              
        </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'I need help to make my jQuery menu behave

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]