Faced with necessity to hide unwanted element on embed website. There's piece of HTML code:
<section class="class Name" style="display: block;">
Problem: Manipulate with CSS does not work due to 'display: block' written inline in HTML body.
Question: Is there any way how to remove this element OR rewrite 'display: block' TO 'display: none' with Java script OR jQuery?
May be it worth, here's exact piece of code that necessary to rewrite from 'display: block' to 'display: hide':
<section class="promotion-block custom-storey no-margin-bottom multi-lang-default en ru pt es fr" style="display: block;">
The task is to add some script that will force native code to be rewritten from display: block; to display: hide;
Thanks!
Try in java script..
document.getElementById('#ElementId').style.display = 'block';//show
document.getElementById('#ElementId').style.display = 'none';//hide
and with jQuery..
$("#ElementId").hide();
$("#ElementId").show();
Hope this helps...
you are going to need to manipulate the JavaScript style proprieties here did you try this:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
remember to create an getelementID(div ID around or into section tag)
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
in JQuery use this to hidden/show div block:
$(".divIDClass").hide(); // hidden
$(".divIDClass").hide(); // show
There needs to be some user interaction to make to toggle between being visible and hidden, i will be assuming it to be a click event on a button with id button.
<script>
var buttonEL = document.getElementById("button");
buttonEL.addEventListener("click" function(){document.getElementsByClass("className")[0].style.display = "none";});
</script>
or if your set up requires it to be hidden always just have
document.getElementsByClass("className")[0].style.display = "none";
There is 2 way to hide the section
override the style attribute.
Use jQuery hide() and show()
If the section is dynamic loaded then you have to use jquery on function .
code:
$(document).on('load','section[class="class Name"]',function()
{
$(this).css('style','display:none');
});
$(document).on('load','section[class="class Name"]',function()
{
$(this).hide();
});
If not dynamic loaded
code:
$('section[class="class Name"]').css('style','display:none');
$('section[class="class Name"]').hide();
Related
Im trying to have a href link expand/display extra text when clicked however when I click it nothing happens.
When I run the html code I can click on the link but it does not show the text for some reason.
Any idea why?
Heres the code:
<html>
click to expand
<div id="divID" style="display: none;">this is expanded</div>
</html>
I'm trying to keep the code as short as possible as the above code will have to be repeated hundreds of times for each link.
Assuming you're using jQuery, you are using the CSS selector incorrectly. Your line should be this:
click to expand
The # in #divID represents any element with an id of divID, whereas just using divID will search for divID tags (something like <divID></divID>)
See here for more documentation on the ID Selector and here's a list of all the CSS selectors you can use, including the Element Selector for you to understand why your previous code didn't work.
You can also combine CSS selectors to narrow your selection in the future, although it's not much necessary with an ID selector:
click to expand
And if you absolutely insist on not using jQuery:
click to expand
or breaking it out into its own function:
<script>
function toggleElementById(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
click to expand
Add this to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then:
$('#divID').toggle();
I see you're using jQuery, right? So I wrote your answer in jQuery..
$('.toggle').click(function () {
var selected = $(this).attr('href');
$('.expandable'+selected).toggle();
});
Check out the jsfiddle
If you're not using jQuery than here is the javascript version (html changed).
var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
var id = obj.dataset.toggle,
el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
Check out the jsfiddle
JavaScript:
function hide_article() {
var htmlElement = document.getElementsByTagName("article")[0];
htmlElement.setAttribute("visibility", "hidden");
console.log("hiding");
};
HTML:
<div id="right-hand-side">
<img src="resources/Logo.png" onmouseover="hide_article()" onclick="hide_article()"/>
</div>
This function is being called but the article is not being hidden. Any idea why? Cheers.
Yes - visibility is a CSS rule name, not an HTML attribute.
htmlElement.style.visibility = 'hidden';
Bear in mind, though, that, unless you have good reason to use visibility (and there are some), you'd normally hide elements via display (= 'none') rather than via visibility.
Also, you're assuming that your function will find an element. If it doesn't, your code will error. Best to check this first:
function hide_article() {
var htmlElements = document.getElementsByTagName("article");
if (htmlElements.length) { //<-- check before continuing
htmlElements[0].style.visibility = "hidden";
console.log("hid element");
}
};
This is the statement that you want:
htmlElement.style.visibility = 'hidden';
I have several hidden divs inside large div, they can be shown one by one or all at once
It looks like this:
<div class="maindiv">
Print "<a href=javascript:show()>Click here to show all</a>
Show/hide div1
<div id="div1" style="display:none;">.....</div>
Show/hide div2
<div id="div2" style="display:none;">.....</div>
....
</div>
showhide() function is ok showing/hiding given div, show() works too but like this:
function show(){
div1.style.display="block";
div2.style.display="block";
...
}
so if I'll have 100 divs I'll have to enter it there 100 times
so my question is, how can I find all hidden divs in div with class maindiv and show em other way than enumerate? Or is the way I do ok?
Try using a generic css class name that is defined similarly:
.hidden{
display:none;
}
Then all you have to do is select the elements that have that class and remove that class. Assuming you are using at least IE9 you can try:
var divs = document.getElementsByClassName("hidden");
for(var i = 0; i < divs.length; i++)
{
divs[i].className = ""; //assuming you only have that class set else you will need to do a search and replace
}
If you have to support earlier versions there are other methods that will work to gather all the divs you need such as document.getElementsByTagName("div")
LIVE DEMO
Try this:
JQuery
$('.maindiv div a').click(function(){
$(this).next().toggle();
});
$('#showAll').click(function(){
$('.maindiv div div').show();
});
HTML
<div class="maindiv">
Click here to show all
<div>
Show/hide div1
<div>.....</div>
Show/hide div2
<div>.....</div>
</div>
</div>
CSS
.maindiv div a{
display:block;
}
.maindiv div div{
display:none;
}
Please try with the below code snippet.
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
//You can also write here if condition
divs[i].style.display = "block";
}
I think this can work
http://jsfiddle.net/rtu75/
function show() {
var divs = document.getElementsByClassName("maindiv");
var l = divs.length;
for( var i = 0; i < l; i++) {
divs[i].setAttribute("class", "show");
}
}
In your css
.show div {
display: block !important;
}
Added important since you have inline styles
Using jQuery, try
$("*").show();
or
$(parentElem).find("*").show();
or
$(":not(:visible)").show();
// This selects "*". Not I expected.
See w3 - css selectors, MDN - css pseudo classes, and jQuery $(), $().find(), $().filter() methods.
As I saw your code below, I saw it's almost work. You need to change id='div1' to class='hid' after that read my below step >> Go down
Show/hide div1
<div id="div1" style="display:none;">.....</div>
Here is my step, I am in same problem but now I can solve this because I read https://stackoverflow.com/a/24192071/10618118 then try to solve until done.
Read below,it's my code.It's work as I want.
in My Style for CSS be like this
<style>
.hid {}
</style>
Next is My Button to control it hidden or visible, Simple.
<button id="see" type="button" onclick="clickSee();">Show More ...</button>
Next step, look at my Javascript Code below,
I use JQuery 3.2.1 to change function in onclick of button.
when user want to hide or see more
just click Show More ... or ... Show less,
Actually it's the same button but user don't know.
If you didn't use JQuery yet and decide to use just copy
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
and paste in <head></head>
<script>
function clickSee() {
document.getElementById("see").innerHTML = "... Show Less";
var divs = document.getElementsByClassName("hid");
for (var i = 0; i < divs.length; i++){
divs[i].style.display = "block";
}
//I use JQuery
$("#see").attr("onclick", "clickHide()");
}
function clickHide() {
document.getElementById("see").innerHTML = "Show More ... ";
var divs = document.getElementsByClassName("hid");
for (var i = 0; i < divs.length; i++){
divs[i].style.display = "none";
}
//I use JQuery
$("#see").attr("onclick", "clickSee()");
}
</script>
If you have any issues just comment below, I will try to help because when done.
There are many way to make your idea work. but I see here is my basic way.
Feel free for new recommendation. Thank you.
Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?
cheers.
JavaScript
<input type="button" id="myButton" onclick="HideFooter()" />
function HideFooter()
{
var display = document.getElementById("myFooter").style.display;
if(display=="none")
document.getElementById("myFooter").style.display="block";
else
document.getElementById("myFooter").style.display="none";
}
JQuery
$("#myButton").click(function(){
if($("#myFooter").is(":visible"))
$("#myFooter").hide();
else
$("#myFooter").show();
});
If you want some other nice effects
$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show
Another method, as Bram Vanroy Suggested:
$("#myButton").click(function(){
$("#myFooter").toggle();
});
It will require JavaScript. Your button click event handler needs to change the display property of the footer to none.
Here's a javascript only version, with the button having and id of "button" and footer id of "footer". This method will allow you to show the footer again after hiding it, if the user wants to see it again.
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('footer');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Or with jQuery:
$("#button").click(function() {
$("#footer").toggle();
});
A nice tutsplus video tutorial for exactly what you need. It's a simple bit of jQuery.
I have two elements, the first one is the default to print on screen
<input id=post-category value="first">
and the other is this, which will only show if some onclick was made and of course the first element must show off
<select id=cat-sel ><option>second</option></select>
UPDATED
I tried this code
el = document.getElementById("post-category");
el.style.visibility = "hidden";
el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";
but the problem here is, the 2nd element is indented. because it escapes the space for the 1st element. I don't like that, I wanted them to be on the same position
Change to
el = document.getElementById("post-category");
el.style.display = "none";
el2 = document.getElementById("cat-sel");
el2.style.display = "block";
since visible/hidden does not remove the space the element takes up on the page
You need to set display:none on the field you need to hide initially
Assuming a checkbox have
window.onload=function() {
document.getElementById("categoryCheckbox").onclick=function() {
var chk = this.checked;
document.getElementById("post-category").style.display = chk?"none":"block";
document.getElementById("cat-sel").style.display = chk?"block":"none";
}
}
PS: A little more code is needed for the show/hide to survive a reload by the way...
Define CSS for your ID's and fix the position.