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
Related
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();
Can wildcards be used with the Javascript "document.getElementById" line?
I have a Vb.net form with 3 div elements ("page1, page2, page3"). What I'm hoping to accomplish is allowing the user to click a button or hyperlink button that will navigate them to the next div ("page#"). Is there a way to do something like the following & loop through each element that has an ID like "page1", "page2", "page3", etc without hard coding?
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
For what I understand, you are looking for the querySelectorAll function and a for-in loop:
var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
// do Stuff - each element get's reached by elements[e]
}
for example:
var elements = document.querySelectorAll("[id^='page']");
for(var e in elements){
if(elements[e].style.display == 'none')
elements[e].style.display = 'block';
else
elements[e].style.display = 'none';
}
this will catch all elements with an id starting with the word "page" and toggle their visibility
Short answer: no, this is not possible. As Markai has pointed out, it is possible. I still feel like using a class is more appropriate, as this better captures the semantics.
A bit longer answer: perhaps you can give each element a class="page". Then you can hide all elements with that class and only display the one you're interested in. You can get elements with class 'page' by using document.getElementsByClassName('page') or the more friendly jQuery selector $('.page').
You could loop the elements. Instead of a toggle, hide all elements except the one you want.
function EnableVisibility(elementName, elementId)
{
for(i=1;i<4;i++)
{
if(i == elementId)
document.getElementById(elementName + i).style.display = 'block';
else
document.getElementById(elementName + i).style.display = 'none';
}
}
EnableVisibility("page", 2); // This would hide all pages and display page2
If you don't like the hardcoded 4, you could change the for loop with a while and if getElementById returns a null then exit the loop.
I personally like the class idea from Martijn and instead of changing the style directly you add or remove a class ex: class="page visible" class="page 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.
I have this:
function toggleCharts() {
var x, divArray = ["item_4746983", "item_4491867"];
for (x in divArray) {
if (x) {
document.getElementById(divArray[x]).style.display = 'block';
}
}
<button onClick="toggleCharts();">Charts</button>
and this:
#item_4746983 {
display:none;
}
#item_4491867 {
display:none;
}
item_4746983 & item_4491867 are thumbnails that I want to show or hide when you click on charts
The code works and they display when I click the button but I can't figure out the code to hide them by clicking on it again.
Instead of styling by id, style by class:
.hiddenThumbnail {
display:none;
}
Then apply and remove the hiddenThumbnail class to and from the two items. This makes your css code smaller, and makes everything generally more maintainable. See this excellent answer for a guide on how to modify the classes.
Alternatively, use a library like YUI to do it (I'm sure jquery has similar functions also).
Check if the div is shown already and change the display. The following code should work.
var div = document.getElementById(divArray[x])
var shown = div.style.display;
if ("block" == shown) {
div.style.display = none;
} else {
div.style.display = block;
}
Here is a link that shows various ways of doing what you want:
http://www.dustindiaz.com/seven-togglers/
Check the demo.
function toggleCharts() {
var divArray = ["item_4746983", "item_4491867"], i, ele;
for (i=0; i < divArray.length; i++) {
ele = document.getElementById(divArray[i]);
ele.style.display = ele.style.display === 'block' ? 'none' : 'block';
}
}
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.