'bad behaviour of the function collapse in accordion( accordion closes then opens with one click)

I got a little problem with accordion, I think I have done something wrong in the function collapse but I'm not sure.

When I click the first time on the accordion, the accordion opens but when I try to click a second time, the accordion closes itself and reopens with just one click.

The problems is the same visually in the simple accordion version and in the multiple accordion version but I give you both because I'm not sure that is the same coding problem.

Simple accordion version

<!DOCTYPE html>
<html>
<head>

    <script src="http%3Cscript%20src=">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
    <script data-auto-replace-svg="nest" src="https://use.fontawesome.com/releases/v5.13.0/js/all.js">
    </script>
    
</head>
<body>
    <div class="container accordion_container">
        <div id="accordion">
            <div class="card" style="border-top: 1px solid #dbdbdbb5 !important">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseOnes" id="closes">
                    <p>Click Title : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                    
                    <p></p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-plus fa-w-14" data-fa-i2svg="" data-icon="plus" data-prefix="fas" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" fill="currentColor"></path></svg></i> <i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-times fa-w-11" data-fa-i2svg="" data-icon="times" data-prefix="fas" role="img" viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="currentColor"></path></svg></i></a>
                </div>
                <div class="collapse" id="collapseOnes">
                    <div class="card-body">
                        <p align="justify">



                            text
                            


                        <br>
                        <br>
                        <br></p>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
               $('.card-link').click(function(){       if(!$(this).hasClass('collapsed')){            $open = $(this).parents('.card').find('.card-body');           $open.slideUp( "300", function() {           });       }     })          $('.card-link').click(function(){       if(!$(this).hasClass('test')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })          $('.card-link').click(function(){       if(!$(this).hasClass('testingg')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })     $('.card-link').click(function(){       if(!$(this).hasClass('testinggtwo')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })               
    </script>
    <style>
          .collapse{     display:none;    }   .card-link .svg-inline--fa.fa-times.fa-w-11 {     display: block;     color: #767474;   }   .card-link .svg-inline--fa.fa-plus.fa-w-14{     display: none;   }    .collapsed .svg-inline--fa.fa-plus.fa-w-14 {     color: #767474;     display: block;   }    .collapsed .svg-inline--fa.fa-times.fa-w-11 {     display: none;   }   .card-link p {     text-align: left;     width: 100%;     display: flex;     color: #000;     font-weight: 500;   }    .card-link .svg-inline--fa.fa-times.fa-w-11 {     float: right;     margin-top: -35px;   }   .btn.product-form__cart-submit {     margin-bottom: 40px;   }   .container.accordion_container {     padding: 0;   }     .card-link .svg-inline--fa.fa-plus.fa-w-14 {     float: right;     margin-top: -35px;   }     .card-header {     background-color: transparent;     border: 1px solid transparent;     padding-bottom: 1px;     padding-top:12px;   }   .card {       border-bottom: 1px solid #dbdbdbb5 !important;     border: 1px solid transparent;   }    .card-body p {     text-align: justify;     margin-top: -19px;     margin-left: 8px;     color: #000;     font-size: 14px;     padding-right: 40px;     padding-top:20px;     padding-left:20px;    }   .card-link svg {     margin-right: 11px;     margin-top: 4px;   }   .card-header {     padding-right: 30px;     padding-left: 30px;   }     div#collapseOnes, #collapseTwos, #collapseThrees, #collapseFours  {     transition:all 0.4s ease !important;     overflow: hidden;   }   @media only screen and (max-width: 600px){     .card-header {       padding-left: 0;     }     .accordion_container {       padding-left: 0;       padding-right: 0;     }     .card-body p {       padding-right: 0px;     }       .card-link p {       font-size:14px;     }    }     
    </style><br>
    <br>
    </body>
</html>

Multiple accordion version :



<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
    <script data-auto-replace-svg="nest" src="https://use.fontawesome.com/releases/v5.13.0/js/all.js">
    </script>
    <title></title>
</head>
<body>
    <div class="container accordion_container">
        <div id="accordion">
            <div class="card" style="border-top: 1px solid #dbdbdbb5 !important">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseOnes" id="closes">
                    <p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-truck fa-w-20" data-fa-i2svg="" data-icon="truck" data-prefix="fas" role="img" viewbox="0 0 640 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z" fill="currentColor"></path></svg></i>tITLE 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-plus fa-w-14" data-fa-i2svg="" data-icon="plus" data-prefix="fas" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" fill="currentColor"></path></svg></i> <i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-times fa-w-11" data-fa-i2svg="" data-icon="times" data-prefix="fas" role="img" viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="currentColor"></path></svg></i></a>
                </div>
                <div class="collapse" id="collapseOnes">
                    <div class="card-body">
                        <p align="justify">


                            text number 1 
                            <br></p>
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwos" id="closes">
                    <p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-calendar-alt fa-w-14" data-fa-i2svg="" data-icon="calendar-alt" data-prefix="far" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z" fill="currentColor"></path></svg></i>tITLE 2</p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-plus fa-w-14" data-fa-i2svg="" data-icon="plus" data-prefix="fas" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" fill="currentColor"></path></svg></i> <i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-times fa-w-11" data-fa-i2svg="" data-icon="times" data-prefix="fas" role="img" viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="currentColor"></path></svg></i></a>
                </div>
                <div class="collapse" id="collapseTwos">
                    <div class="card-body">
                        <p align="justify">



                            text number 2
                        

                        <br></p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseThrees" id="closes">
                    <p><i aria-hidden="true" class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-certificate fa-w-16" data-fa-i2svg="" data-icon="certificate" data-prefix="fa" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M458.622 255.92l45.985-45.005c13.708-12.977 7.316-36.039-10.664-40.339l-62.65-15.99 17.661-62.015c4.991-17.838-11.829-34.663-29.661-29.671l-61.994 17.667-15.984-62.671C337.085.197 313.765-6.276 300.99 7.228L256 53.57 211.011 7.229c-12.63-13.351-36.047-7.234-40.325 10.668l-15.984 62.671-61.995-17.667C74.87 57.907 58.056 74.738 63.046 92.572l17.661 62.015-62.65 15.99C.069 174.878-6.31 197.944 7.392 210.915l45.985 45.005-45.985 45.004c-13.708 12.977-7.316 36.039 10.664 40.339l62.65 15.99-17.661 62.015c-4.991 17.838 11.829 34.663 29.661 29.671l61.994-17.667 15.984 62.671c4.439 18.575 27.696 24.018 40.325 10.668L256 458.61l44.989 46.001c12.5 13.488 35.987 7.486 40.325-10.668l15.984-62.671 61.994 17.667c17.836 4.994 34.651-11.837 29.661-29.671l-17.661-62.015 62.65-15.99c17.987-4.302 24.366-27.367 10.664-40.339l-45.984-45.004z" fill="currentColor"></path></svg></i> tITLE 3 </p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-plus fa-w-14" data-fa-i2svg="" data-icon="plus" data-prefix="fas" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" fill="currentColor"></path></svg></i> <i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-times fa-w-11" data-fa-i2svg="" data-icon="times" data-prefix="fas" role="img" viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="currentColor"></path></svg></i></a>
                </div>
                <div class="collapse" id="collapseThrees">
                    <div class="card-body">
                        <p align="justify">

                            text number 3


                        <br></p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour" id="closes">
                    <p><i aria-hidden="true" class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-trophy fa-w-18" data-fa-i2svg="" data-icon="trophy" data-prefix="fa" role="img" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z" fill="currentColor"></path></svg></i> tITLE 4 </p><i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-plus fa-w-14" data-fa-i2svg="" data-icon="plus" data-prefix="fas" role="img" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" fill="currentColor"></path></svg></i> <i class="" data-fa-i2svg=""><svg aria-hidden="true" class="svg-inline--fa fa-times fa-w-11" data-fa-i2svg="" data-icon="times" data-prefix="fas" role="img" viewbox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="currentColor"></path></svg></i></a>
                </div>
                <div class="collapse" id="collapseFour">
                    <div class="card-body">
                        <p>
                            
                        text number 4



                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
            $('.card-link').click(function(){       if(!$(this).hasClass('collapsed')){            $open = $(this).parents('.card').find('.card-body');           $open.slideUp( "300", function() {           });       }     })          $('.card-link').click(function(){       if(!$(this).hasClass('test')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })          $('.card-link').click(function(){       if(!$(this).hasClass('testingg')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })     $('.card-link').click(function(){       if(!$(this).hasClass('testinggtwo')){            $open = $(this).parents('.card').find('.card-body');           $open.slideDown( "300", function() {           });       }       })           
    </script>
    <style>
      .collapse{     display:none;    }   .card-link .svg-inline--fa.fa-times.fa-w-11 {     display: block;     color: #767474;   }   .card-link .svg-inline--fa.fa-plus.fa-w-14{     display: none;   }    .collapsed .svg-inline--fa.fa-plus.fa-w-14 {     color: #767474;     display: block;   }    .collapsed .svg-inline--fa.fa-times.fa-w-11 {     display: none;   }   .card-link p {     text-align: left;     width: 100%;     display: flex;     color: #000;     font-weight: 500;   }    .card-link .svg-inline--fa.fa-times.fa-w-11 {     float: right;     margin-top: -35px;   }   .btn.product-form__cart-submit {     margin-bottom: 40px;   }   .container.accordion_container {     padding: 0;   }     .card-link .svg-inline--fa.fa-plus.fa-w-14 {     float: right;     margin-top: -35px;   }     .card-header {     background-color: transparent;     border: 1px solid transparent;     padding-bottom: 1px;     padding-top:12px;   }   .card {       border-bottom: 1px solid #dbdbdbb5 !important;     border: 1px solid transparent;   }    .card-body p {     text-align: justify;     margin-top: -19px;     margin-left: 8px;     color: #000;     font-size: 14px;     padding-right: 40px;     padding-top:20px;     padding-left:20px;    }   .card-link svg {     margin-right: 11px;     margin-top: 4px;   }   .card-header {     padding-right: 30px;     padding-left: 30px;   }     div#collapseOnes, #collapseTwos, #collapseThrees, #collapseFours  {     transition:all 0.4s ease !important;     overflow: hidden;   }   @media only screen and (max-width: 600px){     .card-header {       padding-left: 0;     }     .accordion_container {       padding-left: 0;       padding-right: 0;     }     .card-body p {       padding-right: 0px;     }       .card-link p {       font-size:14px;     }    }   
    </style>
</body>
</html>

Thanks a lot in advance.

htmlbootstrap-4accordion


Sources

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

Source: Stack Overflow

Solution Source

Related Questions