Using progressive enhancement to gradually reveal elements with JavaScript

Question

Using progressive enhancement to gradually reveal elements with JavaScript

I have implemented the Jquery toggle method to display a div when a button is clicked

$("button").click(function(){
    $("#divId").toggle();
});

Everything is functioning properly, but the issue is that the default setting displays the div or sets the css property display:block. This means that when the page loads initially, the div is visible and I must click the button to hide it.

Some suggestions from others advised me to modify the css property to resolve this problem. However, I am hesitant as this would conceal the div and could lead to issues if the user had disabled JavaScript for any reason.

My preference is to use JavaScript to hide the div initially before letting Jquery's toggle method take over. I attempted to use

document.getElementById(divId).style.dsplay="none"

placed just before the toggle method, but this approach results in the toggle function not working correctly - it simply hides the div permanently.

javascript jquery html css

Answer 1

Answer №1

To initially hide the div, you can set the value like this:

$(document).ready(function(){
   $("#divId").hide();
   $("button").click(function(){
     $("#divId").toggle();
   });
});

Once you click the button, the page will toggle to display.

Answer 2

To initially hide the div, you can set the value like this:

$(document).ready(function(){
   $("#divId").hide();
   $("button").click(function(){
     $("#divId").toggle();
   });
});

Once you click the button, the page will toggle to display.

Answer 3

Answer №2

Here's a simple trick to hide a div when the page loads:

$(document).ready(function(){
    $("#divId").hide(); //or you can use .toggle()
});

[UPDATE]

If you have more complex logic that should run on both click events and when the page loads:

$(document).ready(function(){
    $("button").trigger('click');
});

Answer 4

Here's a simple trick to hide a div when the page loads:

$(document).ready(function(){
    $("#divId").hide(); //or you can use .toggle()
});

[UPDATE]

If you have more complex logic that should run on both click events and when the page loads:

$(document).ready(function(){
    $("button").trigger('click');
});

Using progressive enhancement to gradually reveal elements with JavaScript

Answer №1

Answer №2

Similar questions

Improving mongo information using angularjs

Initiate a JavaScript promise chain using Bluebird that effectively manages and deals with potential errors

How can I line up two divs horizontally within a container div?

Setting the navigation bar <li> elements to active in PLAY framework using Twitter Bootstrap

Ways to leverage ember.js in a serverless environment

Enhance User Experience with JQuery Autocomplete for Internet Explorer 8 Using ASMX Web Services

Do all programming languages share the same index system for keyboard keys?

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

An issue with JSPDF arises when used on mobile devices

The delete functionality seems to be malfunctioning within Postman

Fade the background image to 50% opacity as you scroll down

The number of Google +1 button likes for a page remains consistent across different languages on the same page

Using a JavaScript function inside a loop without the need for a click event

Setting the background color for a div in Vue.js when importing HTML

Implement conditional logic in jQuery for optimal code execution

Employ the Google Charting library for creating a GeoChart that is currently not displaying

Utilizing AJAX and setInterval Techniques for Efficient handling of window.location.hash

When working with Node.JS, is it necessary to include 'event' if you include 'net' using the require statement?

Utilizing a JavaScript variable to fetch a rails URL: A comprehensive guide

Generate a download link for the image being shown in a div element