0

I'm trying to make this bootstrap collapsible sidebar template work, but can't. It looks like it's supposed to look, but doesn't react on button presses, even though I've downloaded the "Compiled CSS and Js" from https://getbootstrap.com/docs/4.1/getting-started/download/ and jquery and included it like this:

<html>
  <head>
     <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-4.1.3/css/bootstrap.css">
     <script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/bootstrap.js"></script>
     <script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/jquery-3.3.1.min.js"></script>

     <style>style from template</style>
     <script>script from template</script>
  </head>

  <body>
    body from template
  </body>

</html>

When I click on collapse or on any position on the menu it doesn' react at all, as opposed to the correct reaction one can see in template.

enter image description here

Why does this happend and how to fix it?

EDIT: Real link: https://www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu

parsecer
  • 4,758
  • 13
  • 71
  • 140
  • Not clear what you're asking for but sometimes Google may help. https://stackoverflow.com/questions/46562942/bootstrap-4-with-collapsible-sidebar – rmalviya Oct 28 '18 at 14:50
  • @rmalviya My problem isn't the sidebar. My problem is not being able to use the template due to lack of some library of bootstrap which the template uses, which one exactly I don't know. – parsecer Oct 28 '18 at 14:54
  • What template? Provide link. – rmalviya Oct 28 '18 at 14:55
  • @rmalviya It's the 5th word in my question. – parsecer Oct 28 '18 at 15:14

1 Answers1

1

Although your provided link (5th word in question) doesn't point to any starter template. If you're talking about collapsible sidebar as shown in screenshot below:

enter image description here

Then its working for me. All I've done is added missing link for font-awesome css. See the complete code snippet below:

#sidebar .list-group-item {
    border-radius: 0;
    background-color: #333;
    color: #ccc;
    border-left: 0;
    border-right: 0;
    border-color: #2c2c2c;
    white-space: nowrap;
}

/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
    background-color: #222;
}

/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
  background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* level 1*/
#sidebar .list-group .collapse .list-group-item  {
  padding-left: 20px;
}

/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
  padding-left: 30px;
}

/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
  padding-left: 40px;
}

@media (max-width:48em) {
    /* overlay sub levels on small screens */
    #sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
        position: absolute;
        z-index: 1;
        width: 190px;
    }
    #sidebar .list-group > .list-group-item {
        text-align: center;
        padding: .75rem .5rem;
    }
    /* hide caret icons of top level when collapsed */
    #sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
    #sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
        display:none;
    }
}

/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s;
}

#sidebar.collapsing {
  opacity: 0.8;
  width: 0;
  -webkit-transition-timing-function: ease-in;
       -o-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-transition-property: width;
       -o-transition-property: width;
          transition-property: width;

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-1 pl-0 pr-0 collapse fade show" id="sidebar">
            <div class="list-group panel">
                <a href="#menu1" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 1</span> </a>
                <div class="collapse" id="menu1">
                    <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a>
                    <div class="collapse" id="menu1sub1">
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a>
                        <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a>
                        <div class="collapse" id="menu1sub1sub1">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a>
                        </div>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a>
                        <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse"  aria-expanded="false">Subitem 5 e </a>
                        <div class="collapse" id="menu1sub1sub2">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a>
                        </div>
                    </div>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a>
                </div>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-film fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 2</span></a>
                <a href="#menu3" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 3 </span></a>
                <div class="collapse" id="menu3">
                    <a href="#" class="list-group-item" data-parent="#menu3">3.1</a>
                    <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a>
                    <div class="collapse" id="menu3sub2">
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a>
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a>
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a>
                    </div>
                    <a href="#" class="list-group-item" data-parent="#menu3">3.3</a>
                </div>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-heart fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 4</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-list fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 5</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-clock-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-th fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-gear fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-calendar fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-envelope fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-bar-chart-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-star fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span></a>
            </div>
        </div>
        <main class="col-md-9 col-11 pl-2 pt-2">
            <a href="#sidebar" data-toggle="collapse" class="m-2"><i class="fa fa-navicon fa-2x text-muted"></i></a>
            <div class="page-header">
                <h1>Bootstrap 4 Sidebar Menu</h1>
            </div>
            <p class="lead">A responsive, multi-level vertical accordion.</p>
        </main>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
rmalviya
  • 1,847
  • 12
  • 39