Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4.

The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB

Code Snippet:

<div class="main-wrapper col-12">
    <div class="post-wrapper">
        <div class="post-body d-flex">
            <div class="post-content">
                <p>...</p>
            </div>

            <div class="post-toc">
                <!-- I utilize Boostrap-TOC for this table of content: https://afeld.github.io/bootstrap-toc-->         
                <nav class="sticky-top" id="toc"></nav>
            </div>

        </div>
    </div>
</div>


I am seeking assistance to integrate the "table of contents" within a collapsible button and achieve an animation effect upon clicking, similar to the images linked below.

https://i.stack.imgur.com/Zhz96.png

https://i.stack.imgur.com/QcbQt.png

Your help on this matter would be greatly appreciated. Thank you!

javascripthtmlcsstwitter-bootstrap

Answer №1

To create an animation for the side menu, you need to apply a transformation and slide the menu using translateX(100%);. Adding transition: all 300ms; will give it a smooth sliding effect.

It's important to adjust the width of the side menu as it slides to ensure that the content fills the space correctly.

I believe I have successfully achieved the desired effect. Check out the example here: https://codepen.io/diogoperes/pen/NWWWMYW

Answer №2

I incorporated some dynamic movement using jQuery, along with integrating a button and applying Bootstrap classes to center your primary content.

Check out the jQuery function I used below:

$(function() {
  $("#toc-button").click( function() {
    $(".post-toc").stop(true).animate({width:'toggle'}, 400);
  });
});

View a demonstration here: https://codepen.io/evelyng/pen/XWWWqYg

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

How can you use JavaScript to identify resize or zoom changes across all ancestor DOM elements?

I have a DOM element that consists of a chart. <div id="plot1" class='plot-chart'></div> This specific DIV can be nested within various other DIVs. <div id="one" style="width:100%;height:100%;zoom:0.9;"> <div id="two"& ...

javascriptcss

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

javascriptjqueryhtmlcss

What is the best way to wrap a call to XMLHttp Request within a $q promise?

I am trying to figure out how to wrap the following code in an AngularJS ui-router resolve section with a $q promise. The goal is to return success or fail based on whether the http request works. Should I encapsulate all of this inside a promise or just ...

javascriptangularjs

What is the best way to pass compile-time only global variables to my code?

I am looking for a way to easily check if my code is running in development mode, and based on that information, do things like passing the Redux DevTools Enhancer to the Redux store. I know I can use process.env.NODE_ENV for this purpose, but I find it ...

javascriptreactjswebpackenvironment-variables

What is the best approach to transform an HTML textarea value into JSON format?

Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...

javascripthtmljsonnode.js

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

cssreactjstabulator

I'm having trouble retrieving my variable within the socketcluster's socket.on function

How can I store the value of msg in the variable sample when sample is not accessible inside the callback function? import { Injectable } from '@angular/core'; import * as socketCluster from 'socketcluster-client'; @Injectable({ pro ...

javascriptangulartypescriptsocketcluster

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

Using Jquery to detect if there are any Space characters in the user input

In my form, users are required to set up a new Username. The problem arises when they include a space in their username, which I want to prevent. Currently, I am able to detect the presence of a space with this code: var hasSpace = $('#usernameValue ...

javascriptjqueryhtmlforms

Resolve character encoding issues in a JavaScript CSV HTTP response file

When I receive a CSV file as a response from an API, I encounter issues with special characters in French appearing distorted. The content in the CSV files looks like this: Exampleé of Weiéérdnesséé Is there a way to standardize these ...

javascriptcsvexpressexpress-router

Implementing React and Material UI: Maximizing Vertical Space Usage for a Box Component

Currently, I am working on a web application using React combined with Material UI. Within my code snippet below, you will see three Box components in play. Box 1 and Box 3 have specific heights set, but I am looking for a way to make Box 2 occupy the re ...

javascriptreactjsmaterial-ui

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

javascriptarraysangularjslodash

Challenges arise with CSS alignment when adding d3.js charts to a webpage

I'm puzzled by the empty space that appears between the left column (highlighted in the image) and the header. This peculiar gap only seems to occur when the middle column is filled with a chart. I've scrutinized the code using Chrome Developer t ...

javascripthtmlcssd3.js

Are these two sections of my code distinctive in functionality? Do they both address potential errors in the same manner?

After receiving some helpful suggestions on my code from a user on stack overflow, I decided to revisit and make improvements. However, I am now questioning whether the changes I made handle errors in the same way as the original code. This is my initial ...

javascriptnode.jsexpress

retrieve Excel document via POST request

I have a scenario where my API endpoint accepts JSON input and returns an Excel file directly instead of providing a link to download the file. How can I use JQuery AJAX to download this file? Here is the backend code snippet: public function postExcel() ...

javascriptjqueryajax

Puppeteer experiencing issues with missing relative modules and dependencies not being found

After installing puppeteer via npm, I encountered errors when trying to compile it: This dependency was not found: * ws in ./node_modules/puppeteer/lib/WebSocketTransport.js To resolve this, you can run: npm install --save ws These relative modules we ...

javascriptnpmwebpackwebsocketpuppeteer

Create-react-app fails to generate a template even though the react framework is fully updated

I attempted to set up a fresh react directory using npx create-react-app. Unfortunately, every solution I tried resulted in the template not being provided, with the common suggestion being that my version of create-react-app may be outdated. I verified t ...

javascriptreactjscreate-react-app

Intermittent loading issues with Highcharts using AJAX requests

We've encountered intermittent errors when using Highcharts. Despite our efforts, we can't seem to pinpoint the cause of these issues in Chrome: Uncaught Highcharts error #16: www.highcharts.com/errors/16 VM210:16 HighCharts was already loaded V ...

javascriptjqueryajaxdjangohighcharts

PHP Newsletter Creator

Recently, I created a unique php newsletter script in CakePHP that allows users to utilize an in-place editor to generate HTML content for newsletters. While the functionality works well, I have encountered some challenges with a new newsletter design that ...

phphtmlcakephpgdnewsletter

Setting up a recurring task with a while loop in a cron job

Discover numerous libraries dedicated to implementing cron jobs in NodeJS and Javascript, allowing for hosting on a server. Ultimately, cron jobs are simply repetitive tasks set to run at specific times/dates. This led me to ponder the distinction betwee ...

javascriptnode.jscron