jQuery Change CSS display Property to none or block

How to Change CSS display Property to none or block using jQuery

You can use the jQuery css() method to change the CSS display property value to none or block or any other value. The css() method apply style rules directly to the elements i.e. inline.

The following example will change the display of a DIV element on button click:

Example

     #myDiv   Display none Display block 
#myDiv
  

Alternatively, if don’t want to bother about the initial value of the element’s display property, but you want to toggle between its initial value and none, you can simply use the jQuery show() , hide() or just toggle() method. The following example shows how it works:

Example

     #myDiv   Hide Show Toggle 
#myDiv
  

Related FAQ

Here are some more FAQ related to this topic:

Источник

How to add `style=display:»block»` to an element using jQuery?

Edit: or as dave thieben points out in his comment below, you can do this as well:

@dave — or .css(< "display": "block" >); just to short circuit any problems caused by a display variable. — JSLint would reject the version without quotes. ( github.com/douglascrockford/JSLint/issues/110 )

There are multiple function to do this work that wrote in bottom based on priority.

.css()

Set one or more CSS properties for the set of matched elements.

// Or add multiple CSS properties $("div").css(< display: "block", color: "red", . >) 

.show()

Display the matched elements and is roughly equivalent to calling .css(«display», «block»)

You can display element using .show() instead

.attr()

Set one or more attributes for the set of matched elements.

If target element hasn’t style attribute, you can use this method to add inline style to element.

$("div").attr("style", "display:block") 

// Or add multiple CSS properties $("div").attr("style", "display:block; color:red") 

JavaScript

You can add specific CSS property to element using pure javascript, if you don’t want to use jQuery.

var div = document.querySelector("div"); // One property div.style.display = "block"; // Multiple properties div.style.cssText = "display:block; color:red"; // Multiple properties div.setAttribute("style", "display:block; color:red"); 

Источник

Как изменить CSS-свойство display на none или block с помощью jQuery

Вы можете использовать jQuery-метод css() , чтобы изменить значение свойства CSS display на none, block или любое другое значение. Метод css() применяет правила стиля непосредственно к элементам, то есть к встроенным.

Следующий пример изменит отображение элемента DIV при нажатии кнопки:

     #myDiv   Display none Display block 
#myDiv
  

В качестве альтернативы, если вы беспокоитесь о начальном значении свойства display элемента, но хотите переключаться между его начальным значением и none, вы можете просто использовать jQuery-метод show() , hide() или просто toggle() . В следующем примере показано, как это работает:

     #myDiv   Hide Show Toggle 
#myDiv
  

Читайте также

Похожие примеры:

Источник

How can I change CSS display none or block property using jQuery?

An alternate way is to use the jQuery css method:

$("#id").css("display", "none"); $("#id").css("display", "block"); 

I tried using $(‘#id’).css(‘display’, ‘none’); , but it did not work. However, using $(‘#id’).css(‘color’, ‘red’); does work. I am not sure why, though. Does anyone have any ideas? Thanks in advance.

It is also worth to include difference between $(‘#id’).hide() and $(«#id»).css(«display», «none») in this answer.

There is a difference between two, where former function hides the text only and doesn’t free up a space occupied by an element whereas latter hide the content and free up the space occupied by cocern element

There are several ways to accomplish this, each with its own intended purpose.

1.) To use inline while simply assigning an element a list of things to do

$('#ele_id').css('display', 'block').animate(. $('#ele_id').css('display', 'none').animate(. 

2.) To use while setting multiple CSS properties

3.) To dynamically call on command

4.) To dynamically toggle between block and none, if it’s a div

If the display of the div is block by default, you can just use .show() and .hide() , or even simpler, .toggle() to toggle between visibility.

document.getElementById("myDIV").style.display = "none"; 

Other way to do it using jQuery CSS method:

In case you want to hide and show an element, depending on whether it is already visible or not, you can use toggle instead of .hide() and .show()

setTimeout(()=>< $("#id").css("display", "none"); >, 2000) $("#id2").css("display", "none");

 
Hello World!
 
Hello World 2!

(function($)< $.fn.displayChange = function(fn)< $this = $(this); var state = <>; state.old = $this.css('display'); var intervalID = setInterval(function() < if( $this.css('display') != state.old )< state.change = $this.css('display'); fn(state); state.old = $this.css('display'); >>, 100); > $(function()< var tag = $('#content'); tag.displayChange(function(obj)< console.log(obj); >); >) >)(jQuery); 

.hide() does not work in Chrome for me.

var pctDOM = jQuery("#vr-preview-progress-content")[0]; pctDOM.hidden = true; 

In my case I was doing show / hide elements of a form according to whether an input element was empty or not, so that when hiding the elements the element following the hidden ones was repositioned occupying its space it was necessary to do a float: left of the element of such an element. Even using a plugin as dependsOn it was necessary to use float.

When adding an answer to a nine year old question with 13 existing answers where one of them is the accepted answer it is very important to include an explanation of how and why the answer works and also to point out what new aspect of the question your answer addresses. The supplied code does not work as written and lacks an explanation showing how to customize it.

Please don’t post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

I have downvoted you, not because of the lack of explanation (which I agree with the others here) but because your answer will not work if someone gives the value of «‘none or block’ «. Plus you have a syntax error in your code. (See, this is why an explanation helps.). Take the time to provide an answer so that it becomes useful to someone reading it.

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Источник

jQuery & CSS — Remove/Add display:none

And I’d like with some jQuery methods remove that display:none; (so the div will showed) and than add it again (so the div will shadow). How can I do it?

14 Answers 14

You can then easily show and hide the element(s).

The problem is, .show() does nor remove display: none , but instead put display: block or inline depending on the element, and it can break the layout if the element use an unusual display style.

@lolesque I found a simple ‘hack’ to fix that issue. Simply use element in your css, but in your js, also use element.hide() at the same time. This will allow the show() function to work.

getElementById("id").style.display = null; 

I had to use $(«#id»).css(‘display’, »); to make it work properly in removing the inline style for «display»

Me too @TrippinBill (using Mac Firefox 43) — have submitted an edit. These seem to be the only way to remove the CSS property rather than reverse it. This allows it to be overridden by broader CSS assignments, whereas reversing it doesn’t.

So, let me give you sample code:

The link will be the trigger to show the div when clicked. So your Javascript will be:

You’re almost always better off letting jQuery handle the styling for hiding and showing elements.

Edit: I see people above are recommending using .show and .hide for this. .toggle allows you to do both with just one effect. So that’s cool.

Good idea to show the toggle function. Many times if you need to click something and show it, you would like the functionality to hide it too.

Use toggle to show and hide.

Check working example at http://jsfiddle.net/jNqTa/

The only way to remove an inline «display:none» via jQuery’s css-api is by resetting it with the empty string ( null does NOT work btw!!).

According to the jQuery docu this is the general way to «remove» a once set inline style property.

should do the trick properly.

IMHO there is a method missing in jQuery that could be called «unhide» or «reveal» which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide() should store the initial inline value and show() should restore that.

i’d suggest adding a class to display/hide elements:

and then use jquery’s .toggleClass() to show/hide the element:

You’re not giving us much information but in general this might be a solution:

Which other infos do you need? I think its a simple question, isn’t it? Anyway, I resolved by using $(«.news»).show() and $(«.news»).hide() 😉

One obious question is: are there more div.news on the page. In which case this would display all of them.

jQuery’s .show() and .hide() functions are probably your best bet.

For some reason, toggle didn’t work for me, and I received the error uncaught type error toggle is not a function when inspecting the element in browser. So I used the following code and it started working for me.

Used jquery script file jquery-2.1.3.min.js .

If you have a lot of elements you would like to .hide() or .show() , you are going to waste a lot of resources to do what you want — even if use .hide(0) or .show(0) — the 0 parameter is the duration of the animation.

As opposed to Prototype.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery‘s implementation is more complex and not recommended for a large number of elements.

In this cases you should probably try .css(‘display’,’none’) to hide and .css(‘display’,») to show

.css(‘display’,’block’) should be avoided, especially if you’re working with inline elements, table rows (actually any table elements) etc.

Источник