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

Application crash imminent, alert: Uncaught TypeError detected - Unable to access property 'some' of undefined within React

My application has 3 sections. The first section consists of a form where users fill in details about watches, and the data is submitted using the submitHandler function. In the second part, users can enter watches from the first section. When a user click ...

javascriptarraysreactjs

Is the Mini Cart button in Woocommerce not aligned properly?

My website was functioning perfectly until yesterday. However, after updating some plugins, the Mini Cart dropdown button started to display in a weird and misaligned manner. Prior to the plugin updates, the button had the following style: background-col ...

csswordpresswoocommerce

Maintain font kerning for span elements that are not displayed inline

I am looking to add some transform effects to individual letters in a word. To achieve this, I have enclosed each letter within a span element. However, when setting the display of these spans to inline-block, the font kerning gets disrupted. I have exper ...

htmlcss

Do I have to divide the small functions in my Node.js controller into smaller ones?

When signing up users in my controller, do I need to break up the sign-up steps into individual asynchronous calls or is one big asynchronous call sufficient? Each step relies on the previous one: Validate user Create user Create group Add user to group ...

javascriptnode.jsasynchronousq

Execute JavaScript code and showcase the result in the frame on the right side

On the left side of a frame, I have a menu. My goal is to invoke a javascript function that will load a new HTML page on the right side of the frame using XML data and an XSL template. When trying to achieve this with fixed parameters, the code works perf ...

javascripthtml

Display and conceal various elements in Vue.js using a data list

I'm a beginner in Vue.js, currently using Vue+Webpack. I am trying to make each link display data based on their respective ids when clicked, and match with the show attribute. I have created this functionality in a .vue file. export default { el ...

javascriptarraysjsonvue.jsvue-component

Changing an array into a list using javascript

function convertArrayToList(inputArray) { let list = null; for (let i = inputArray.length - 1; i >= 0; i--) { list = { value: inputArray[i], rest: list }; } return list; } let result = convertArrayToList([10, 20]); console.log(JSON.stringi ...

javascriptarrayslistobject

How can I properly redirect an HTTP request to HTTPS on my Express server?

Currently, I am working on my API and have configured it to work with the HTTPS protocol using SSL. Here is the code snippet: https.createServer({ key: fs.readFileSync(certKeySSLPath), cert: fs.readFileSync(certSSLPath) }, app).listen(serverPORTHTT ...

javascriptnode.jsexpresssslhttps

When attempting to log API results in Next.js, a TypeError occurs because the property is undefined

I'm encountering a rather unusual error. In my Next.js app, I am attempting to console log the results of an API call to see what data I receive. The API function is responsible for verifying if a user is logged in, and if they are, I render a specifi ...

javascriptreactjsnext.js

Selenium is throwing an error indicating that a list object does not have the attribute to find an element

In my quest to extract nutritional data from a website through web scraping, everything was going smoothly until I encountered pages with slightly different formatting. When using selenium and a specific line of code, I noticed that it returned an empty l ...

pythonhtmlseleniumxpathweb-scraping

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Passing information from Vue to a modal

I'm working with 3 components: TaskList, TaskItem, and TaskForm. Within the TaskList component, there is a loop that renders all the data in TaskItem. Each TaskItem has an edit button meant to open a TaskForm modal (using bootstrap) displaying the sp ...

javascriptvue.jsbootstrap-modalbootstrap-5

Tips for validating a text input field depending on the selected value in a dropdown menu using AngularJS

When a user selects from the dropdown menu, they can choose between Number and Decimalnumber. If the user selects Number, the text box should only allow whole numbers (e.g. 22, 33, 444, 345436). The user should not be able to enter decimal values like 22 ...

javascriptjqueryangularjs

Troubles arise when hovering over and connecting endpoints in jsPlumb

I'm currently facing two challenges with my project. Follow this link for more details. 1) The hover effect is working perfectly on the endpoints, but I can't seem to change the colors of my connector when hovering over it. Any suggestions? (Ref ...

javascriptjsplumb

Toggle the class of a div when clicked and then change the class of another div

In my website, I have a site overlay Div (#site-overlay) that is currently set as display:none. I am looking to change the class to block when I hover and click on the menu buttons. I can use both vanilla JavaScript and jQuery to achieve this. The menu it ...

javascriptjquery

Is there a way to incorporate a computed value into a table prop while working with Element UI?

In my frontend development, I am utilizing vuejs along with element ui. I am faced with the task of rendering a table that includes dates in unix format. To make these dates more user-friendly, I have incorporated moment.js to convert them into a readable ...

javascriptvue.jselement-ui

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I am in the process of developing a website that compares different products. I have implemented code that retrieves and scrapes data for comparison when a user performs a search. Right now, I am using an ajax request for each company (currently 6 compani ...

phpjqueryhtmlajax

JavaScript integration is a key aspect of working with Rails 3.1, especially when utilizing JQuery

I've been searching for a clear answer to this issue and I know I'm not the only one stressing about it. Current best practices suggest placing javascripts at the bottom of the page. However, any blocks that use proper $(function() {...}); will ...

jqueryruby-on-rails-3twitter-bootstrap

javascript unable to delete cookie

After conducting extensive research across various articles and links on deleting cookies using JavaScript, I have encountered an issue where the JavaScript code does not seem to be functioning as expected. The code I utilized for setting cookie values usi ...

javascriptcookiessession-cookies

What's the reason behind the malfunction of this code on Chrome?

After recently installing Mobiscroll, I have been using the date scroller feature with the following code to manage the textbox. <script type="text/javascript"> $(function() { // create a datepicker with default settings $("#begi ...

javascriptjquery