How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure:

<div class="row">
    <div class="col-md-2">
        <div class="well">
            <span><b>Resources</b></span>
            <form class="form-inline">
                <input type="text" placeholder="type text here"
                       class="form-control" id="resource_filter" />
                <button class="clear btn btn-default btn-sm" type="button"
                        title="clean">
                    <span class="glyphicon glyphicon-repeat"></span>
                </button>
            </form>
        </div>
    </div>
    <div class="col-md-10">
        <div id="calendar" class="well"></div>
    </div>
</div>

I'm specifically looking to show or hide the div with the col-md-2 class in order for the last div (col-md-10) to take up the full width. Any simple solutions for this?

jqueryhtmlcsstwitter-bootstrap

Answer №1

Are you looking for something like this? For the best experience, make sure to view it in full screen.

  1. To hide/show the sidebar, use the hidden class.
  2. To resize the main bar, utilize either the col-XX-12 or col-XX-10 class.

Snippet

$(function () {
  $("#btnShoHide").click(function () {
    $(".hideable-sidebar").toggleClass("hidden");
    $(".expandable-main").toggleClass("col-xs-10 col-xs-12");
  });
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-2 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <input type="text" placeholder="type text here"
                 class="form-control" id="resource_filter" />
          <button class="clear btn btn-default btn-sm" type="button"
                  title="clean">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
        </form>
      </div>
    </div>
    <div class="col-xs-10 expandable-main">
      <div id="calendar" class="well">
        <input type="button" class="btn btn-default" value="Show or Hide" id="btnShoHide" />
      </div>
    </div>
  </div>
</div>

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

Toggle visibility with jQuery's Show & Hide feature

Currently, I am working with some divs that need to be hidden (with the class .hideable) and others that need to be shown (with the class .toggleable). I have made progress in getting everything to work as desired. However, I am facing a challenge - once t ...

javascriptjqueryhtmlcss

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

javascriptcssnode.jsexpressejs

Check domains using Jquery, AJAX, and PHP

I'm currently developing a tool to check domain availability. Here is the PHP code I have so far: <?php $domain = $_GET["domname"]; function get_data($url) { $ch = curl_init(); $timeout = 5; curl_setopt($ch, CURLOPT_URL, $url); ...

javascriptphpjqueryajaxjson

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

I have been attempting to overlay my navbar on top of a background image by nesting it within a div and using absolute positioning. However, I've run into an issue where the navbar-header/navbar-brand section causes the rest of the navbar to wrap onto ...

htmlcsstwitter-bootstrap

The Ajax request encountered an error due to an unsupported grant type

Working on some JavaScript code and trying to create a method that will make a request to a web API and get a token in return (not completed yet). This is my current code: $.ajax({ type: 'POST', crossDomain: true, //For cors on web a ...

jqueryajaxtoken

Why is my data attribute not being updated by the jQuery.data() method?

Here is an example of HTML code: <div id="mydiv" data-hoo-foo="bar"></div> As illustrated above, I am attempting to achieve the following: var $mydiv = $('#mydiv'); $mydiv.data('hoo-foo'); // returns 'bar&apos ...

jqueryhtmlcustom-data-attribute

Using JQuery's $.post function can be unreliable at times

Looking for help with a function that's giving me trouble: function Login() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; $.post("Login.php", { ...

javascriptjqueryhtmlajax

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

"Using Jquery to display a dynamic loading spinner that is connected to various form

My goal is to implement two spinners on different fields within the same Rails form, each triggered by a keyup remote call. Using jQuery, I have the following code: <div class="form_element"> <%= f.label :email, :class=>"field_hint", :title ...

ruby-on-railsajaxjquery

Locate an element within the identical div that shares the same class

I want to dynamically add content inside a specific div by targeting its class name only after the user clicks on an element. Here is the layout structure: <div class="wrap"> <div class="divOne"> <div class="divOneItem">< ...

jquery

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

What's causing the excessive amount of white space in my image?

Whenever I include a picture of myself on the page, it creates excessive white space at the bottom. I'm not sure why this happens, but removing the image eliminates the white space. I've attempted adjusting the margins and padding, as well as se ...

htmlcss

Creating dynamic videos that adjust to fit different screen sizes in Bootstrap-5

I am working on a two column layout where I want to display a video in the first column and an image in the second column, both of which should be responsive. While I have successfully made the image responsive, I am facing issues with making the video res ...

twitter-bootstrapbootstrap-5

Differences Between Bootstrap Source Code and Bootstrap CDN Link

I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...

htmlcssbootstrap-5

How to disable CSS transition on Angular 4 component initialization

I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a ...

cssangularcss-transitions

Iterate through an ajax function by employing promises

I have recently delved into the world of es6-promises and I'm struggling to fully grasp its concepts. In my project, I am attempting to retrieve data through an ajax call and keep looping until all data is fetched (essentially pagination). Below is t ...

javascriptjqueryjsonajaxes6-promise

Tips for ensuring the footer always stays at the bottom of the page

I'm having an issue with keeping the footer pinned to the bottom of the page. I haven't applied any specific styles to the footer, just placed it at the end of the content. Everything looks great until there's a page with minimal content, ca ...

javascripthtmlcssbootstrap-4footer

Creating a multiplication table using a multidimensional array in mathematics

I'm attempting to create a multiplication table from 1 to 10 using a `for` loop and store it in a multidimensional array, but I'm encountering issues. Every time I run the script, I receive the following error message: Notice: Undefined offset ...

phphtmlarraysmultidimensional-array

oj-select-one displays a comprehensive list of values in the dropdown

Typically, oj-select-one will only display the first 15 values before requiring the user to search for more. Is there a way to show all values in the dropdown list without needing to use the search function? I attempted to use minimumResultsForSearch as s ...

javascripthtmloracle-jet

Utilizing Flask to insert data into a MySQL database table

Hey there, I'm running into some trouble with inserting values into my database. While I can successfully log in using the same method on the sign-up page, I've tried various options without success. Below is my Python code: from flask import F ...

pythonhtmlcssmysqlflask