Transform your sidebar menu into a collapsible dropdown using Bootstrap

My goal is to transform the left sidebar, which currently has a vertical menu built with "nav nav-pills nav-stacked", into a suitable dropdown menu that starts off as closed/collapsed when the screen size is XS (mobile).

Here is the starting code snippet:

http://www.bootply.com/zOy2IJumZO

The provided html code is displayed below:

<div class="container-fluid">
  <div class="row">

    <div class="col-xs-12 col-sm-3">

        <div class="panel panel-info">
            <div class="panel-heading">Categories <span class="badge pull-right">12345</span></div>
            <ul id="categories-menu" class="nav nav-pills nav-stacked">
                <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
                <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
                <li id="cid-10"><a href="community">Community</a></li>
                <li id="cid-2"><a href="electronics">Electronics</a></li>
                <li id="cid-11"><a href="events">Events</a></li>
                <li id="cid-12"><a href="fashion">Fashion</a></li>
                <li id="cid-13"><a href="freebies">Freebies</a></li>
            </ul>            
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">Site statistics</div>
            <ul class="list-unstyled">
                <li>1000 Users</li>
                <li>200 Online</li>
                <li>300 Hidden</li>
            </ul>
        </div>

    </div>

    <div class="col-xs-12 col-sm-9">
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
      This is the right content column<br>
    </div>

  </div>
</div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To implement collapsible functionality using Bootstrap, ensure your ul element is wrapped with the bootstrap collapse class:

<div class="collapse navbar-collapse" id="collapse">  
    <ul id="categories-menu" class="nav nav-pills nav-stacked">
        <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li>
        <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li>
        <li id="cid-10"><a href="community">Community</a></li>
        <li id="cid-2"><a href="electronics">Electronics</a></li>
        <li id="cid-11"><a href="events">Events</a></li>
        <li id="cid-12"><a href="fashion">Fashion</a></li>
        <li id="cid-13"><a href="freebies">Freebies</a></li>
    </ul> 
</div>

Next, include data-toggle and data-target attributes on the element that will toggle the menu. For instance, for badge number 12345 in your code:

<span data-toggle="collapse" data-target="#collapse" class="badge pull-right">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on displaying console.log in mobile simulator while using Angular2

Interested in debugging JavaScript on mobile devices, particularly Android and iPhone. Seeking a code snippet or library that can display console.log messages on the screen of a phone emulator. Ideally looking for a solution that works with angular2 and i ...

javascriptangulardebuggingionic2console.log

Utilizing Vuex to Access a Component's Property in Vue

Utilizing Vuex in my app is integral for executing asynchronous tasks, such as logging a user into the application. Upon successful login and execution of axios.then(), I aim to notify the component from which I invoked this.$store.dispatch('login&apo ...

javascriptvue.jsvuex

Arrange the 2D array in JavaScript by utilizing both categories

Looking to organize a 2D array based on two specific criteria: [ [ "the,", 3 ], [ "who,", 3 ], [ "take,", 4 ], [ "over,", 4 ], [ "world,", 5 ] ] Sort by number in ascending order Then arrange alphabe ...

javascriptarrayssorting

Add the following code snippet below every second set of two paragraphs that are enclosed within h

I am looking to add Advertisements following the 2nd paragraph in every h2 tag. Here is an example of what I want: <h2>Sub title</h2> <p>1st paragraph</p> <p>2nd paragraph</p> <div>INSERTED AD</div> functio ...

phphtmlparagraph

What methods can I use to emphasize three distinct dates?

I'm facing difficulty highlighting three specific dates: "10-11-2020", "22-11-2020", and "07-11-2020" using React.js and Datepicker. Unfortunately, my attempts have not been successful so far. Here is the code snippet I am working with: import React, ...

javascripthtmlcssreactjsdatepicker

What is the best way to identify when a cell has been modified in ng-grid aside from just relying on the ng-grid event

My web application features an editable ng-grid that has greatly simplified my work, but I have encountered a minor issue. I need a way to detect when a user makes changes to the grid without having to compare each field before and after. Currently, I am ...

javascriptangularjscellng-grid

To toggle between two scope variables within a view when one is not defined

In my application, I am utilizing two scope variables: $scope.banner and $scope.defaultBanner. The banner is fetched using a service, but in cases where the banner file does not exist, the variable will be empty as the service returns nothing. My goal is ...

javascriptangularjs

Tips on sending a string as an argument in an onclick function

I am currently attempting to automatically add an anchor, and here is what I have tried: " <a id='" + x.NomFic + "' onclick='TransfererFica( " +x.Idtran +" , "+ x.NumVdr + " , '" + x.NomFic ...

javascriptasp.net

transform a JSON object into a new format

I am working with a JSON object that looks like this: [ { "AF28110": 33456.75, "AF27989": 13297.26 } ] My goal is to convert it into the following format: [ { "name": "AF28110", "price": 33456.75}, { "name": "AF27989", "price": 13297.26} ...

javascriptjson

What causes the data property to supersede the return false in a jQuery ajax call?

Below is a block of code that I am currently working with: $("#contact_container form, #contact_details form").live( "submit", function(event) { $.ajax({ type: this.method, url: this.action, data: this.s ...

javascriptjquery

Tips for creating an effective navigation bar

I am currently working on creating the navigation bar for my website with plans to make it responsive using CSS. In my layout, I have a logo and site name positioned on the left side, one button and text field in the center, and two small square dropdowns ...

htmlcsslayoutresponsive-designhtml-lists

When attempting to input a value in the middle of the line, the cursor unexpectedly leaps to the end

I have successfully created a code that prevents spaces at the beginning and special characters in an input field. The code is working perfectly, but there is an issue with the cursor moving to the end when trying to type at the beginning or middle of the ...

javascripthtmlreactjs

Utilizing a JavaScript Library in your Scala.js Project: A Step-by-Step Guide

I am currently following a tutorial on setting up dependencies in my Scala.js project. Here is the link to the tutorial: First and foremost, I have organized my project setup as shown below: https://github.com/scala-js/scalajs-cross-compile-example Wi ...

javascriptscalascala.jscross-build

Does IE8 only submit form data when a button is clicked, not when the submit

Something odd is happening - I had this working perfectly around a month ago, before making several code updates. Now, the live submit handler isn't triggering in IE8. However, it does work when triggered by a button click. Take a look at the code sni ...

javascriptjqueryhtmlajaxfile-upload

The spinal cord of design inquiry

I am currently working on a Backbone view called MainMenuView. Within this, the MainMenuModel consists of an array of sub-models known as ItemModel. The main menu is divided into two pages and includes next and previous buttons for navigation. The first pa ...

javascriptjquerydesign-patternsbackbone.js

The dropdown-menu-end class in Bootstrap 5 navbar is not activating on hover as expected

My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected. I attempted using CSS for the hover effect: .dropdown:hover .dropdown-menu { display: block; mar ...

cssnavbarbootstrap-5

Resetting a selectbox in Chrome using jQuery: A step-by-step guide

Does anyone know how to clear the selection of an HTML select box? I've tried using the following code, which works in Safari and Firefox but not in Google Chrome: $('select#selectbox').val(null); Any suggestions or solutions? Check out t ...

jquerygoogle-chromedrop-down-menu

Basic game of tic tac toe using JavaScript and jQuery

Teaching myself the ropes of JavaScript/jQuery, I decided to dive into building a simple tic tac toe game. Following this example as a guide, I embarked on creating my own version. While most parts seem to be working smoothly, there's one problem that ...

javascriptjquery

Implementing jQuery to Replace PHP echo Statements

I am in the process of loading images (pinpoints) onto a map. When a user clicks on a pinpoint, a corresponding video URL is loaded from a database. To achieve this, I assign IDs to the images based on their index in MySQL using PHP. This allows me to inte ...

phpjquery

Using Jquery to allow users to dynamically add <a href> links to localstorage

In the context of a work project, there is a bookmark page with internal links already set up. However, I am looking to allow users to add custom bookmarks with their own URLs dynamically and save them via local storage. This could potentially include an i ...

jqueryhtmluser-inputdynamically-generated