This question already has answers here:
jQuery & CSS - Remove/Add display:none
(14 answers)
Closed 9 years ago.
How to remove the style with jQuery or JavaScript in order to display the div element?
<div style="display: none">display something </div>
If you know ,please share with me . Thanks
PS：Before ,I have tried with jquery.show(), but the effect is a big blank over there
Try like
$('div').css('display','block');
Better you give an class or id to the specific div and try like
Using Id :
$('#div_id').css('display','block');
Using Class :
$('.div_class').css('display','block');
You better assign some id to your div to make it unique and keep the change upto desired element. You can use style property of javascript DOM object to access display or other sub-property.
<div style="display: none" id="id" >display something </div>
Using javascript
document.getElementById('id').style.display = 'block';
Using JQuery, you can use id selector
$('#id').css('display','block');
If you just want to change display property you can use show / hide method instead.
$('#id').show();
document.getElementById('id of the div').style.display = 'block';
should give an Id to the div
Another method is
$('div').css('display','block');
jQuery provide shortcut for this:
$('div').show();
You can show it with the jQuery show method, like this:
$('div').show();
This will show all divs on your page. If you want to only show this particular div, you could give it an id, like this:
<div style="display: none" id="myDiv">display something </div>
And then show it like this:
$('#myDiv').show();
If you just want to show the div you can do this:
$("div").show();
If you want to remove the style tag completely:
$("div").removeAttr("style");
Note: Id recommend giving your div an id or class otherwise either of the above 2 options will do it to all div's not just this one.
e.g: <div id="myDiv" style="display: none">display something </div>
then you would change that div liek this:
$("#myDiv").show();
To remove an style effect :
$('div').css('display','');
From jQuery doc :
$( "#mydiv" ).css( "color", "" ) — removes that property from an
element if it has already been directly applied.
See doc
first you need to identify the div for that give the div an ID or a class attribute
<div style="display: none" id="mydiv">display something </div>
then jQuery
jQuery(function($){
$('#mydiv').show()
})
Related
I know that is a bad practice to have more than HTML elements having same ID. However such is my situation where I need to specifically modify either of them.
I researched around and found about Jquery method 'document.getElementByID' that returns with the first similar element and lets you change it using css. Using that I wrote the code below but it doesn't work.
$(document.getElementById('it_trending-3')).css({"display":"none"});
I have added this code in my wordpress theme using the CSS-JS-PHP wordpress plugin, created a shortcut from the same and then added the shortcode. Can someone please guide me what and where I went wrong?
Also feel free to suggest a different function that would maybe let me specifically point to each of the same ID elements using maybe indexes. Thanks!
Keep a class to the divs you want to change:
<div>
<span id="a" class="test">1</span>
<span id="b" class="test">2</span>
<span>3</span>
</div>
The Jquery would go like this:
$(function() {
var w = $("div");
console.log($('#a').length);
console.log($('body #a').length);
console.log($('#a', w).length);
});
$(".test").first().css({"color":"orange"});
//or
$(".test:first").css({"color":"orange"});
But if you want to select any specific element with the class via an index of sorts, then you would need to do it like this:
var x = $(".test");
$(x[1]).css({"color":"orange"});
You can achieve this in 2 ways.
Based on element's hierarchy or based on class attribute / custom data attribute to the element.
In the below example we have 3 span elements with the same id and we have to apply 3 colors to each of those span elements.
HTML
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 1st div)
</span>
</div>
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 2nd div)
</span>
</div>
<br /><br /><br />
<span id="it_trending-3" class="testcls">
Applying css to same Id with class
</span>
Applying css using js / jquery based on element hierarchy
JQuery
(function($){
$("div:last #it_trending-3").css("color", "red");
$("div:first #it_trending-3").css("color", "green");
})(jQuery);
Based on class attribute / custom data attribute to the element.
JQuery
(function($){
$("#it_trending-3.testcls").css("color", "blue");
})(jQuery);
JS Fiddle Demo
I have the following HTML code:
<div id="ThanksWebPart" class="ThanksWebPartDisplay">
</div>
I want to be able to hide this <div> tag. I want to remove display:none if I'm on the previous page.
How do I remove display:none if I have a different location address?
With jQuery, use toggle() :
$('#ThanksWebPart').toggle(); // toggle again to make it appear again.
With Javascript, use the style.display property :
getElementById("ThanksWebPart").style.display = 'none'; //'block' to make it appear again.
$("#ThanksWebPart").css("display", "none"); to hide.
$("#ThanksWebPart").css("display", "block"); to show.
Alternatively, you can also use .show() and .hide().
I want to achieve something like this
<div id="121" tags="single,multi,binary">HTML Section</div>
<div id="122" tags="single,binary">HTML Section 2</div>
<div id="123" tags="binary">HTML Section 2</div>
Within javascript if i have a value "binary" it should show all three.
If I have value for a variable as single it should display 1st and second.
I know how to show hide the div. I just want to know if i can add user defined attribute to div and pull its value to match. If not , is there an alternate design to achieve this.
You can do this:
$('[tags*=single]')
But I would advice you to use data-tags
*= is contains prefix selector.
With pure javascript:
document.querySelectorAll("[tags*=single]") // returns NodeList
You could change tags to classes, -> class="single multi binary"
Then use class selectors in jquery. -> $('.single').each(function(){ /* Code Here */ });
Then use jquery addClass and removeClass to push and pull attributes. -> $(element).addClass('hex');
Please help, I need to get the value of the span eg. <span itemprop="title">God Of War</span> which is "God Of War" and assign the value as an ID or Class to a div. How can I do that in Javascript?
<span itemprop="title">God Of War</span>
<div>You will see result here</div>
<button>Do</button>
jQuery
$(function(){
$('button').click(function(){
$('div').attr('class', $('span[itemprop="title"]').html())
.html('filled a class');
});
});
Click the button -> Right click the div -> inspect element -> and you will see your div has been filled with class you want.
See here -> http://jsfiddle.net/aldiunanto/HdPWs/
You tagged your post as jquery so I'm assuming jquery is acceptable. Take a look at these functions in the jquery api for more details.
$('div').attr('id', $('span[itemprop="title"]').html());
Frist you can assign a class or id to the span then
Use Javascript simple
document.getElementById('spanid / class').innerHTML;
I'm trying to use HTML5 valid markup here, so instead of adding to values to class I want to use the data-*="" to show/hide certain divs.
<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>
<div class="randomclass" data-chattingto="cheesecake"></div>
<div class="randomclass" data-chattingto="milkshake"></div>
I can get the value of data-chattingto like so:
$("div").data("chattingto");
and I can hide/show a div with a certain class like so:
$(".randomclass").hide();
But how do I hide all divs with the data-chattingto value of cheesecake?
Thank you very much.
Simply use attribute-equals notation:
$('div[data-chattingto="cheesecake"]').hide();
And a JS Fiddle demo, kindly provided by CrunchyV.
References:
[attribute="value"] selector.
That would be:
$('div[data-chattingto = "cheesecake"]').show();
And
$('div[data-chattingto = "cheesecake"]').hide();