implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However, I also want to keep a small portion of the first column visible for users to click and bring it back in view.

Here is a link to my code snippet: http://jsfiddle.net/VJmfq/

Currently, I have encountered an issue where the first column does not move unless I completely hide its content or animate the width to 0px (which I want to avoid as I want some content to remain visible). I attempted to animate the inner content's width, but the animation occurs from both sides simultaneously. Ideally, the inner content should align with the right side of the first column without affecting the layout of the middle column.


$(document).ready(function() {
$(".two").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
    //Show before animation!
    $(".one").stop().animate({width:"197px"}, 170);
    $(".one div").stop().animate({width:"137px"}, 310, function(){

    });
    $(this).removeClass("isDown");
} else {
    //Hide after animation!
    $(".one").stop().animate({width:"10px"}, 310);
    $(".one div").stop().animate({width:"5px"}, 310, function(){

    });
    $(this).addClass("isDown");
}
return false;
});
});

Although I can successfully animate the column without content by reducing its width, the provided code attempts to achieve the same effect with content inside, resulting in issues. I wish to simply set the marginLeft of the first column to -185px to drag the middle section along with it, but this approach seems ineffective due to the css table layout.

Answer №1

It seems like the key here is adjusting the widths. Try removing the width from div.two, and ensure that in your animate functions, div.one ends up 50px wider (margin-left) than div.one div. This approach has worked for me. Check out this example: http://jsfiddle.net/VJmfq/1/

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

Triggering an action with JQuery when clicking on a button within an Angular

I need to open a new link whenever a column in my datatable is clicked. Below is the code for my datatable which fetches data through an ajax call- <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="featuretable row-border compact ...

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using slot[name=foo]::slotted(:nth-child(2)){, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit. ...

Attempting to grasp the concept of Thennables within the VSCode API. Can these TypeScript code examples be considered equivalent?

I'm looking to perform a series of modifications on a document using the VSCode API. The key function in this process is Workspace.applyEdit, which gives back a Thennable. This is my first encounter with it, and the one returned from this function doe ...

Issue with Chart.js not showing up in Android Webview when animation is disabled

I am experiencing an issue with a javascript enabled WebView using a ChromeWebClient. The Chart.Js pie example displays fine until I set the options to animation: false, after which the chart stops displaying. var pieOptions = { animation : fa ...

Guide on invoking a function in a PHP file using jQuery's load method

I am having trouble displaying the data retrieved from the database. There is a function called "getComments(page)" in the getComments.php file, where 'page' is an integer parameter corresponding to the chosen database. I need to call this functi ...

Set the Vue 3 Select-Option to automatically select the first option as the default choice

I am attempting to set the first select option as the default, so it shows up immediately when the page loads. I initially thought I could use something simple like index === 0 with v-bind:selected since it is a boolean attribute to select the first option ...

In what ways can I incorporate Django template tags into my JavaScript code?

I've encountered an issue with implementing my model data into a FullCalendar library template in JavaScript. Despite seeing others do the same successfully, I keep getting errors as the template tags fail to register properly. <script> documen ...

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

Avoid activating automatic save feature in Material UI data grid

After creating a data-grid and attempting to add records, I encountered an issue where pressing the TAB key automatically saved the data when focusing on the save button without manually pressing enter. How can this behavior be prevented so that manual con ...

A Guide on Integrating a Javascript Reference into HTML while Displaying a PHP Object

Our website relies heavily on PHP modules to generate objects that are essential for constructing our web pages. Some of the key modules we have include: Anchor (ahref) Button CheckBox ComboBox DateTime Email Label Note Password Phone RadioButton RichTe ...

"Enhance Your Highchart Experience by Adding Hyperlinks to Every Segment of Your Stacked Bar

I am seeking to assign a specific link to each segment of a stacked 100% bar chart. Check out this demo of a stacked bar chart: Here's what I am trying to accomplish: Please visit , input data in the left table, and submit it. After submission, you ...

D3 circle packing showcases a concise two-line label text

I've browsed through the topics on this site, but none of the solutions provided worked for my issue. Is there a way to display text in two lines for long texts in D3 circle packing? The following code is what I am using to show labels on circles: c ...

Creating a magical transformation for the bootstrap carousel

Trying to create a bootstrap wizard with a carousel and disable auto-scrolling by setting bs-interval to "false" without success. Here is my code: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" ...

What is the best way to retrieve the contents of a UserControl from the server using Jquery Ajax?

Many have found that Asp.Net's ajax implementation with UpdatePanel can be quite slow, as the entire ViewState is sent to the server even for partial postback. This led me to switch to using jQuery, but now I'm trying to figure out how to make a ...

What is the best way to retrieve seat number upon clicking in React Native?

I have implemented a for loop and assigned its value in the click function to retrieve the seat number when a seat is clicked. However, I am only getting the last number of the for loop every time a seat is clicked. Can someone guide me on how to obtain th ...

The process of transferring ViewBag value as a parameter in an AngularJS function

I'm facing an issue where the viewbag value is not being passed as a parameter in ng-init. Can someone guide me on how I can successfully pass the viewbag value as a parameter? angular.js { $scope.detail = function (Id) { ...

Python code that extracts data from an AJAX website

Looking to scrape a website that includes a directory of individuals and their details. The issue arises when the site uses ajax to load new information as I continue scrolling down. I'm in need of data for every single person on the list. The urllib ...

Receiving undefined when subscribing data to an observable in Angular

Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

I have set up a canvas element with a large image and I want to enable dragging using ionic-scroll. Following the provided example: <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; h ...