Ways to implement a table column as a slider

My goal is to create a single-page website with a table as the main content. The first column of this table should be toggleable by a button.

I specifically want to display the first column of the table only on the slidebar and not both the table and the slidebar simultaneously. Clicking the button should minimize the first column of the table.

View before toggling

View after toggling

I am new to front-end concepts and seeking guidance on how to achieve this idea. Any help or answers would be greatly appreciated.

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <div class="sidebar">
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" 
            data-widget="treeview" role="menu"
                data-accordion="false">
                <div>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="far fa-user"> </i>
                            <p>
                                Adelfried
                            </p>
                        </a>
                    </li>
                </div>
                <div class="dropdown-divider"></div>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="far fa-user"> </i>
                        <p>
                            Kalona
                        </p>
                    </a>
                </li>
                <div class="dropdown-divider"></div>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="far fa-user"> </i>
                        <p>
                            Raynard
                        </p>
                    </a>
                </li>
                <div class="dropdown-divider"></div>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="far fa-user"> </i>
                        <p>
                            Wesley
                        </p>
                    </a>
                </li>
                <div class="dropdown-divider"></div>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="far fa-user"> </i>
                        <p>
                            Theobald
                        </p>
                    </a>
                </li>
                <div class="dropdown-divider"></div>
            </ul>
        </nav>
    </div>
</aside>


    <div class="content" style="overflow: scroll; padding: 10px">
        <div class="container-fluid">
            <div class="row">
                <div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <td>Name</td>
                                <td>AAAAAAAAAAAAAA</td>
                                <td>BBBBBBBBBBBBBB</td>
                                <td>CCCCCCCCCCCCCC</td>
                                <td>DDDDDDDDDDDDDD</td>
                                <td>EEEEEEEEEEEEEE</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><i class="far fa-user"> </i>Adelfried</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><i class="far fa-user"> </i>Kalona</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><i class="far fa-user"> </i>Raynard</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>
                                <td><i class="far fa-user"> </i>Wesley</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><i class="far fa-user"> </i>Theobald</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

If your goal is to make the first column collapsible with a unique style, consider eliminating the slider entirely. Below is a simple example demonstrating how you can collapse and stylize the first column:

var table = document.getElementById('usertable');

var toggleCollapsed = function(e) {
  if (table.classList.contains('collapsed')) {
    table.classList.remove('collapsed');
  } else {
    table.classList.add('collapsed');
  }
}

table.addEventListener('click', toggleCollapsed)
table td:first-child {
  background-color: black;
  color: white;
}
table td:first-child i {
  margin-right: 5px;
}
table.collapsed td:first-child {
  text-align:center;
}
table.collapsed td:first-child i {
  margin-right: 0;
}
table.collapsed td:first-child .username {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table id="usertable" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
          <td><span class="username">Name</span></td>
            <td>AAAAAAAAAAAAAA</td>
            <td>BBBBBBBBBBBBBB</td>
            <td>CCCCCCCCCCCCCC</td>
            <td>DDDDDDDDDDDDDD</td>
            <td>EEEEEEEEEEEEEE</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Adelfried</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Kalona</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Raynard</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Wesley</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Theobald</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

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

Firefox does not process Ajax requests in the same way as other browsers

On my (mvc) website, I have some code that uses Ajax to retrieve information. Everything works smoothly in most browsers except for Firefox. For some reason, Firefox bypasses the Ajax controller and goes straight to the default controller. $('.navba ...

jqueryajaxfirefox

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss

Tips for rearranging the order of x-editable events?

I'm currently developing a web application using angularJs and xeditables. Within this application, I have multiple xeditable text elements following each other, with validation triggering upon pressing enter or clicking outside the text field: &l ...

javascriptangularjstwitter-bootstrapx-editable

Issue with AnimeJS Motion Path causing element to deviate from desired SVG path

I'm attempting to use an SVG element and the AnimeJS library to make the orange marker follow the course of this RC car race track. https://i.stack.imgur.com/8FKHC.png Despite my efforts, I am encountering strange and undesirable outcomes. At times ...

javascripthtmlcsssvganime.js

How can you eliminate a line from the HTML input mask in Gravity Forms?

With Gravity Forms, I am utilizing the "input masks" feature to prompt users to enter data in a specific format. However, it seems to be creating an unwanted line within the input field itself as shown in the image below: https://i.stack.imgur.com/8gQ3K.j ...

htmlcssgravity-forms-plugin

Simple HTML editors in django modified for non-employee, authorized individuals to utilize

I need a solution for allowing users to create HTML content securely, with basic editing capabilities. It should also include server-side HTML sanitization and the ability to upload images/files. The editor needs to be extremely user-friendly, as the audie ...

htmldjangosecuritywysiwygusability

Is it possible for jQuery datepicker to choose a date over a decade in the past?

Recently, I encountered an issue with jQuery-UI's datepicker where it was restricting me to select birthdays only within the last 10 years. This basically meant that users older than 10 years couldn't be accommodated :) I attempted to override t ...

javascriptjqueryjquery-uidatepicker

Options in the dropdown menu

After browsing online, I came across a functional example that I would like to replicate in a similar manner. Is there a way to show 2 different prices and currencies for the same selection in a drop-down menu without having separate drop-downs for each c ...

javascriptmysqldrop-down-menu

Unable to locate the default margin for the body element in the browser's default stylesheet

Recently, I created a basic html file. <h1 class="one">Hello</h1> While inspecting the margin for the body element in Firefox (version 90.0.2 64 bit), I noticed it was set to 8px. Curiously, this value seemed to originate from the de ...

htmlcss

Change the icon display mode automatically after a short delay

Hey there! I am trying to implement an AJAX function that changes an icon from "off" to "working" when a link is clicked, and then to "on" after the work is completed. However, I also need the icon to switch back to "off" after a few seconds of being in ...

jqueryajax

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

javascripthtmlreactjsnext.jschatbot

ng-if directive does not show data in AngularJS

I have a dynamic collection of images and videos that I want to display one at a time. Specifically, when I click on an image ID, I want it to show the corresponding image, and when I click on a video ID, I want it to show the relevant video. Below is the ...

javascriptangularjs

Laravel - Triggering a 405 Error: GET Method Not Permitted by the Server

Currently, I am working with Laravel and trying to use an AJAX request to toggle between enabling and disabling status. The code works perfectly fine on localhost, but as soon as I try to deploy it on the server, I encounter this error: 405 GET Method N ...

javascriptphpajaxlaravel

Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...

htmlcssdrop-down-menuz-indexoverlap

Prevent content overlap in Tumblr's sidebars by using CSS positioning techniques

I'm facing an issue with my blog on Tumblr where the sidebar keeps overlapping the main content. I have modified a premade template and am trying to position the sidebar in the top right corner using absolute or fixed positioning: #sidebar{ position: ...

csspositioningtumblrsidebar

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

I'm attempting to utilize a Django variable as the percentage width value within a style tag in HTML, but it's not functioning correctly. Strangely, I've discovered that using curly braces {} within style tags is prohibited—this contradict ...

pythonhtmlcssdjango

The re-rendering of a functional component utilizing React.useCallback and React.memo() is occurring

I was delving into React concepts and eager to experiment with some new things. Here are a few questions that crossed my mind: Does every functional child component re-render when the parent state changes, even if it doesn't have any props? It seems ...

javascriptreactjsreact-hooks

Button addition in Angular is malfunctioning

I have a form with add and remove fields implemented using angularjs. It works fine when running outside the div, but when placed inside a div, only the remove function is working. Can you please advise on what might be going wrong? <body> <div ...

javascriptcssangularjs

What is the best way to set a date input as required with AngularJS?

Angular 1.2.23 is the version I am currently using, and I want to set an input field with type=date as required. Here is the code snippet I have: <form name="form" novalidate> <input id="date" name="date" type="date" required /> <sp ...

javascriptangularjs

Saving the current state of a member variable within an Angular 2 class

export class RSDLeadsComponent implements OnInit{ templateModel:RSDLeads = { "excludedRealStateDomains": [{"domain":""}], "leadAllocationConfigNotEditables": [{"attributeName":""}] }; oldResponse:any; constructor(private la ...

javascriptangulartypescript2-way-object-databindinges6-class