Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage:

header-div
fixed_menu_div
page_cont

Each of these divs are styled with the following CSS properties:

#header-div {
    top:0;
    left:0;
    display:inline;
    float:left;
}

#page_cont {
    margin-left:200px;
    height:80%;
}

#fixed_menu_div {
    width:200px;
    height:80%;
    float:left;
    left:0;
    overflow-x:none;
    overflow-y:scroll;
    position:fixed;
}

The objective is to include links within the header_div and fixed_menu_div that will toggle their visibility, save the state (hide or show) even after page refresh, while also expanding the page_cont div to occupy 100% width.

javascriptjqueryhtmlcss

Answer №1

One way to keep track of whether your divs are shown or hidden is by storing their state in a cookie and checking the cookie when the page is loaded or refreshed.

If you'd like to learn more about working with cookies in JavaScript, check out this helpful link: w3schools.com/js/js_cookies.asp

Answer №2

To preserve the visible state of your elements, it is recommended to store this information in a database using ajax calls instead of relying on cookies which can be easily cleared. Once you have saved the visibility status in the database, you can use the method below to toggle the display of these elements.

$(document).ready(function(){
   $('#page_cont').css('width','100%');
   //retrieve the values from the database where 1 represents visible and 0 represents invisible
   setVisibility(1,0,1);
});

function setVisibility(header_div_visibility, page_cont_visibility, fixed_menu_div_visibility){
    (header_div_visibility === 1) ? $('#header-div').show() : $('#header-div').hide();
    (page_cont_visibility === 1) ? $('#page_cont').show() : $('#page_cont').hide();
    (fixed_menu_div_visibility === 1) ? $('#fixed_menu_div').show() : $('#fixed_menu_div').hide();
}

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

Guide on implementing enums (or const) in VueJS

Seeking help on a seemingly simple task, I am trying to understand how to use "enums" in VueJS. In my file named LandingPage.js, I have the following code: const Form = { LOGIN: 0, SIGN_UP: 1, FORGOT_PASSWORD: 2, }; function main() { new Vue({ ...

javascriptvue.js

"Is there a way to initiate a Date Picker with the current date using Javascript in an AngularJS application

I am having an issue with my date picker where the month starts from the current month and goes up to the next 12 months. However, I only want to display dates from the current date to the last date of the current month. I believe I need to set a limit so ...

javascripthtmlangularjsdate

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

I am currently working with angularjs and typescript and I am attempting to create a directive in the following manner: Below is my controller : export const test1 = { template: require('./app.html'), controller($scope, $http) { ...

javascriptangularjstypescriptdirective

The custom functionality implemented for the JQuery validation plugin is malfunctioning

I am having trouble with a custom method I added to the JQuery validation plugin. Despite trying to find solutions on various forums, I still can't resolve the issue. While I do get an error message when leaving the custom phone number field blank, t ...

jqueryhtmlvalidation

Adjustable pseudo-elements derived from the size of the element

I have a unique feature in my web application that involves a span element with inner text and additional :before and :after pseudo-elements used as decorative lines on each side of the text. Check out this JSFiddle example to see exactly what I mean. .c ...

jqueryhtmlcsscss-selectorspseudo-element

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

htmlxmltemplatesxslttoken

Effortless File Uploading in JERSEY using jquery and AJAX

I'm looking to achieve file uploads with Jersey through jQuery/AJAX, but I'm struggling with extracting the file from the input and sending it via AJAX. Below is my current code: HTML <form action="rest/files/upload" method="post" enctype=" ...

javajqueryajaxrestjersey

Setting up CSS Flexbox so that the first child element is the same height as the

I am striving to ensure that when the layout switches to mobile, the image block matches the height of the title and content blocks. The layout is quite complex; it functions correctly in desktop view with the title block at the top full-width. I suspect ...

cssflexbox

Is there a way to duplicate an image a specified number of times depending on a given output value?

As a beginner in coding, I am looking to learn how to dynamically insert multiple images based on input and output values. Currently, my code for basic addition looks like this: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <inpu ...

javascriptjqueryhtmlimage

Unable to reinitialize MUI DatePicker after keydown event

Encountering an unusual behavior that defies explanation has left me puzzled. You can explore the code sandbox here. I am attempting to enable resetting a readOnly field by pressing DEL or BACKSPACE, but it seems to be ineffective. Oddly enough, I can suc ...

javascriptreactjsmaterial-ui

What is the best way to obtain the final visible element using jQuery?

Could you please check out the following link: http://jsfiddle.net/SHfz4/ All of the blue boxes are technically visible, so I can't use the code $('.row .inner .item:visible:last'); as it will always return box 27. Some boxes may not be v ...

javascriptjquery

Is there a way to position text to the right of an image?

Looking for some help with aligning text to the right of an image within a hyperlink. I want the hyperlink to fill the rectangle and achieve a specific layout similar to attachment1, but currently getting something different like attachment2. If anyone ha ...

css

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Tips for adjusting the height and border of Bootstrap tabs

I'm facing an issue with the modal and nav-tabs I created. There are a couple of problems that need to be addressed. Firstly, the tabs have excessive height and I've tried adjusting it using CSS height property, but it's not working as e ...

jqueryhtmlcsstwitter-bootstrap

Challenges encountered when using promises for handling mysql query results

I've been working on creating a function that will return the value of a mysql query using promises. Here's what I have so far: query(query: string): string { var response = "No response..."; var sendRequest = (query:string): Prom ...

javascriptnode.jstypescript

it results in an error when attempting to deconstruct an object

Using a style object in a component <Temp styles={{fontWeight: 'bold', fontSize: '1.6'}} ...otherprops /> Encountering an error while deconstructing the style object Cannot read property 'fontSize' of undefined. The d ...

javascriptreactjsecmascript-6styled-components

What is the significance of z-index in relation to relative and absolute positioning?

Is there an issue with z-index when working with a div that has absolute position relative to another div? I am trying to place the absolute div below the other one, but it always appears on top. How can I resolve this problem? ...

css

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

jqueryhtmlcss

BEM Methodology: Ensuring the CSS value in one block takes precedence over property definitions in another block

I'm facing a challenge with BEM as I try to make properties from one block take precedence over styles in another. Some might suggest adding a modifier for .button, but in some cases, specific properties need to be applied only on certain pages withou ...

csssassoverridingbem