Bootstrap Toggle Collapse Is Not Working

Bootstrap Collapse not Collapsing

jQuery is required (if you're using Bootstrap 3 or 4) ;-)

<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- THIS LINE -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
</div>

</body>
</html>

Bootstrap toggle collapse is not working

Try it. Now if you click on second link then first link is collapse.

<html>   <head>      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>   </head>   <body>   <div id="accordion">      <div class="card card-plain">         <div class="card-header" role="tab" id="heading1">            <a data-toggle="collapse" aria-expanded="true" aria-controls="collapse1"  data-target="#collapse1">            Company Information            <i class="now-ui-icons arrows-1_minimal-down"></i>            </a>         </div>         <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">            <div class="card-body">               <div class="row">                  <div class="col-sm-6">                     <label>Company Name</label>                     <input class="form-control" id="comp_entity" name="comp_entity" type="text" placeholder="Company Name" value="">                  </div>                  <div class="col-sm-6">                     <label>Business Unit / Division</label>                     <input class="form-control" id="bus_unit_div" name="bus_unit_div" type="text" placeholder="Business Unit / Division" value="">                  </div>               </div>            </div>         </div>      </div>      <div class="card card-plain">         <div class="card-header" role="tab" id="heading2">            <a class="collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse2" data-target="#collapse2">            Employee Information            <i class="now-ui-icons arrows-1_minimal-down"></i>            </a>         </div>         <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">            <div class="card-body">               <div class="row">                  <div class="col-sm-6">                     <label>Job title / role</label>                     <input class="form-control" id="job_title" name="job_title" type="text" placeholder="Job Title / Role" value="">                  </div>               </div>               <div class="row">                  <div class="col-sm-6">                     <label>Hours of Work</label>                     <input class="form-control" id="hours_of_work" name="hours_of_work" type="text" placeholder="Hours of Work" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">                  </div>                  <div class="col-sm-6">                     <label>Performance Rating</label>                     <input class="form-control" id="perform_rating" name="perform_rating" type="text" placeholder="Performance Rating" value="">                  </div>               </div>            </div>            <div class="row">               <div class="col-sm-6">                  <label>Personnel (Staff) Number</label>                  <input class="form-control" id="personal_staff_num" name="personal_staff_num" type="text" placeholder="Personnel (Staff) number" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">               </div>            </div>         </div>      </div>      </div>        </body></html>

Collapse not working (Bootstrap 4)

Your code is fine it just your ordering is not correct all is missing to include jQuery because bootstrap based in jQuery.

codepen : `http://codepen.io/AElkhodary/pen/odqYxP`

Bootstrap 4 collapse not working properly

I found the solution and if someone ever come on this page with the same problem this is the solution. slideToggle() is NOT going to work properly if it triggers element with display flex. I just removed d-flex and flex-column and it works perfectly now!

bootstrap toggle. collapse not working

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        
  </head>
  <body>       
     <nav class="navbar navbar-default">
       <div class="container-fluid">           
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="#">Brand</a>
         </div>        
         <div class="collapse navbar-collapse" id="mainNavBar">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
             <li><a href="#">Link</a></li>
           </ul>     
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>
   </div>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>
 </body>
</html>

Here is a link to plunkr

You missed a class collapsed and a space was there between

data- toggle="collapse"

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false">

Bootstrap navbar content not showing when collapsed

Here you go...

Change:

data-toggle="collapse" (Bootstrap 4) to data-bs-toggle="collapse" (Bootstrap 5)
data-target="#navbarNav" (Bootstrap 4) to data-bs-target="#navbarNav" (Bootstrap 5)

#navbarLogo {
  width: 10rem;
  height: auto;
}

.navbar-brand img {
  height: 50px;
  width: auto;
  padding-left: 30px;
}

#linkText {
  font-family: hdFontMedium;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

#navbarNav {
  justify-content: flex-end;
  align-items: center;
}

#navbarListItem {
  padding-left: 10px;
  padding-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap css-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href=/static/main.css>
  <link rel="stylesheet" href=/static/style.css>
  <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
  <title>Dimsum Siblings</title>
  <!--font-awesome including icon for shopping cart-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-light bg-secondary" id="navbar">
    <a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
      <img src="static/media/logoWithText.png" alt="" id="navbarLogo">
    </a>

    <button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">ABOUT US</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="/dimsumshop">
            <h3 id="linkText">ORDER DIMSUM BOX</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">INSTRUCTIONS</h3>
          </a>
        </li>

        <li class="nav-item active" id="navbarListItem">
          <a class="nav-link px-6" id="mainNavlink" href="">
            <h3 id="linkText">CONTACT</h3>
          </a>
        </li>

      </ul>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

</body>

</html>

what's wrong with Bootstrap toggle collapse? it is not working

I really did not understand, what the reason was and I could not solve the problem by JQuery but I made what I wanted by CSS. I made an accordion in the main menu:

<div class="acorcss">   
                        <div class="tabs">
                          <div class="tab">
                            <input type="checkbox" id="chck1">
                            <label class="tab-label" for="chck1">دوره های سریالی</label>
                            <div class="tab-content">
                              <a href="<?php echo site_url().'/archive-towlid-mohtava/'; ?>"><li><span>صفر تا صد تولید محتوا</span></li></a>
                              <!--<a href="#"><li><span>دوره های آنلاین</span></li></a>-->
                            </div>
                          </div>
                        </div>
                </div>

the CSS code:

.acorcss {
    border-top: 1px solid #ddd;
    padding-top: 5px;
    margin-top: 5px;
}
.acorcss input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
/* Accordion styles */
.acorcss .tabs {
  overflow: hidden;
  /*box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);*/
}
.acorcss .tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.acorcss .tab-label {
    position: relative;
    display: flex;
    /* justify-content: space-between; */
    cursor: pointer;
    color: black;
    background: white;
    font-weight: normal;
    font-size: 13px;
    line-height: 36px;
}
/* Icon */
.acorcss .tab-label::after {
    content: "\276F";
    content: "\02795";
    transition: all .35s;
    position: absolute;
    left: 0;
    color: black;
    color: #696969;
}
.acorcss .tab:first-child .tab-label::before {
    content: "\f018";
    font-family: fontawesome;
    font-weight: normal;
    transition: all .35s;
    vertical-align: middle;
    font-size: 18px;
    margin-left: 10px;
    color: red;
}
.acorcss .tab-content {
    max-height: 0;
    padding-right: 10px;
    color: #2c3e50;
    background: white;
    transition: all .35s;
}
.acorcss .tab-content li {
    line-height: 26px;
}
.acorcss .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #2c3e50;
    cursor: pointer;
}
.acorcss .tab-close:hover {
      background: darken(#2c3e50, 10%);
}
.acorcss input:checked + .tab-label {
    background: #2c3e50;
    background: white;
    font-weight: bold;
}
.acorcss input:checked + .tab-label::after {
    /*transform: rotate(90deg);*/
    content: "\2796";
}

.acorcss input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 0 20px 10px 0;
    padding: 0 10px 10px 0;
}