I hope, somebody can explain me where I'm wrong with my code...So I have this function:
function divdisplay(element){
if(document.getElementById(element).style.display == 'none'){
document.getElementById(element).style.display = 'block';
for (var i=0; i<NUMBER_OF_DIVS; i++)
document.getElementById(i).style.display = 'none';
} else
document.getElementById(element).style.display = 'none';
The function displays the divs just fine, but the hiding part is the problem. I want to hide several other <divs>. The ids of these other <divs> are simple numbers, which is why I try to address these elements with the variable i. But when I click on <div> #1 while <div> #2 is already visible, only <div> #1 appears and <div> #2 does not disappear.
The <divs> look like this:
<div id="1" style="display:none;">
<a href="javascript:divdisplay(1);">
<img src="..."/>
</a>
</div>
<div id="2" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
<div id="3" style="display:none;">
...
And they first appear when the corresponding link
<a href="javascript:divdisplay(1);">
<a href="javascript:divdisplay(2);">
<a href=...
is clicked.
The image in each <div> is linked to the function again, so a click on the image inside the <div> hides it again, but a click on another link does not make the visible <div> disappear again. Where did I go wrong?
Thanks in advance anyway.
Why you don't use Jquery? You only have to add a class to each div you want to hide/show
<div class="test">content here</div>
and now you can use show() and hide() from jquery.
$(".test").show(); and $(".test").hide(); will show/hide all div's with the class test.
You also check out show() and hide().
In addition you have chance to add an effect to your show() and hide() function.
This function loops through all your divs and only shows the one you specify in element
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
var div = document.getElementById('div'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
}
}
I prefer not to use jQuery in small functions like this, because it'll save you from loading a library (-1 HTTP request), and the native functionality is simply faster. (Not significant at this amount of code, but still)
Assuming you're not using jQuery already, that is. If you are, this will work:
Assuming you add a class to all elements like this:
<div class="hideMe" id="1" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
jquery:
function divdisplay(element){
$(".hideMe").hide();
$("#"+element).show();
}
Related
I want show div 1 on html load while hiding div 2, then using onclick I want to exchange their visibility like when clicking button hide div1 then show div2, then when clicking again, hide div2 then show div 1. Here is my code:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Hide DIV 1 show DIV 2
<div id="foo"> This is DIV 1</div></div>
<div id="foo"> This is DIV 2</div></div>
Initially set your div1 to display:none; and simply toggle them.
I have used class targetElement just to get rid of common selector. hidden class is used to use the default style display:none; and to replace the inline-style.
I woul like to use button instead of Click here. to do this simple replace a tag with <button type="button"> Button Name </button>
$('#toggleButton').on('click',function(){
$('.targetElement').toggleClass('hidden');
});
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggleButton" href="#">Click here</a>
<div id="foo" class="targetElement hidden"> This is DIV 1</div></div>
<div id="foo" class="targetElement"> This is DIV 2</div></div>
The attribute id must be unique in a document. Use class instead.
First use CSS to hide the second div. Then use forEach() to hide/show div. You should also avoid using inline event handler.
Try the following way:
document.querySelector('a').addEventListener('click',function(){
[].forEach.call(document.querySelectorAll('.foo'), function(el){
if(el.style.display == 'none')
el.style.display = 'block';
else
el.style.display = 'none';
});
});
Hide DIV 1 show DIV 2
<div class="foo"> This is DIV 1</div></div>
<div class="foo" style="display:none;"> This is DIV 2</div></div>
It is not good practice to have 2 elements with the same ID. ID's should always be unique. Use classes instead. To hide a div onload. Simply add the css to your html element in a style attribute. You also had unecessary </div> tags that I removed.
Here is working code using JQuery (less code) :
$("#toggle").on("click", function() {
$(".isToggable").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggle" href="#" >Hide DIV 1 show DIV 2</a>
<div class="isToggable"> This is DIV 1</div>
<div class="isToggable" style="display:none"> This is DIV 2</div>
In the html, I added classes to elements that you want to be toggled. I also added an ID to the a tag. In the JQuery I added an event listener onclick on that a tag using it's ID. $(".isToggable").toggle(); takes all the elements with the class "isToggable" in the page toggles their visibility.
With no parameters, the .toggle() method simply toggles the visibility of elements
More information on toggle : JQuery Toggle
Old answer (vanilla javascript)
function toggle_visibility(id) {
var container = document.getElementById(id);
for (var i = 0; i < container.children.length; i++) {
let currentElem = container.children[i];
if (currentElem.style.display === "none") {
currentElem.style.display = "block";
} else {
currentElem.style.display = "none";
}
}
}
Hide DIV 1 show DIV 2
<div id="container">
<div> This is DIV 1</div>
<div style="display:none"> This is DIV 2</div>
</div>
How this works is you put your elements that you want to toggle the visibility inside a container and the toggle_visibility function will toggle all the visibilities of the elements inside. That way if you decide to add more div's they will all be handled.
If you have any questions on how this works. Don't hesitate to ask. Hope it helps !
I've got help with a script that works in the first modal but doesn't in any of the next couple. When you scroll down, the background color changes in the first modal but nothing happens in the second and so forth.
https://jsfiddle.net/qhrmtass/10/
var scrollFn = function () {
var targetOffset = $("#anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Specification says UNIQUE
HTML 4.01 specification says ID must be document-wide unique.
HTML 5 specification says the same thing but in other words. It says that ID must be unique in its home subtree which is basically the document if we read the definition of it.
First for the best practice you have to change duplicate id anchor-point (in my example i change it to class) also for the id one should be unique.
Secondly you have to use $(this) inside your scroll function scrollFn to detect the current scrolling remodal and to select the elements that belong to it.
HTML :
<a class="project-link" href="#modal1" id="one" style="margin-right:25px;">Modurra Shelving </a>
<div class="remodal" data-remodal-id="modal1">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div> <a class="project-link" href="#modal2" id="one" style="margin-right:25px;">Other stuff </a>
<div class="remodal" data-remodal-id="modal2">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div>
Js :
var scrollFn = function () {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".projectTitle").addClass("topper");
} else {
$(this).find(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Hope this could help, take a look at Working fiddle
I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.
With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo
Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.
I have made 3 different forms and each form contains a div with the same classname as in the other forms. (so they overlap)
I also made a link section with three links to choose which div/form should be shown but i cant get it to work.
I have tried many things but the closest i came was clicking a link and having the div shown for less than a seconds. Please help.
I made a new code, same concept but the original code was probably too long to post here.
<body>
<div class="links">
<table>
<tr><td><a href="" onclick="showdiv('first','second','third')" >first</a></td></tr>
<tr><td><a href="" onclick="showdiv('second','first','third')" >second</a></td></tr>
<tr><td><a href="" onclick="showdiv('third','second','first')" >Third</a></td></tr>
</table>
</div>
<form name="first">
<div id="first" class="content">
-------------
</div>
</form>
<form name"second">
<div id="second" class="content">
//////////////
</div>
</form>
<form name="third">
<div id=third class="content">
++++++++++++++
</form>
<script type="text/javascript">
function hide_all(){
document.getElementById("first").style.display='none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}
hide_all()
function showdiv(a,b,c) {
document.getElementById(a).style.display='block';
document.getElementById(b).style.display = 'none';
document.getElementById(c).style.display = 'none';
}
</script>
</body>
</html>
As you can probably see im new to html and javascript :)
#link is ID of the clicked link and each link has class name called .links once you link the link, the clicked link will be hidden and other links will be shown
$('#link').click(function(){
$('.links').css('visibility', 'visible');
$(this).css('visibility', 'hidden');
})
As I cant see your code assume this may help.
Have you tried:
document.getElementById("id").style.visibility="hidden"
document.getElementById("id").style.visibility="show"
also work to visible again.
Instead of passing all three ids pass only id of element to show and before showing element hide all elements by class:
function showdiv(idToHide) {
var array = document.getElementsByClassName('content');
for(var i = 0; i < array.length; i++)
{
array[i].style.display = 'none';
}
document.getElementById(idToHide).style.display='';
}
and call it:
<table>
<tr><td><a href="" onclick="showdiv('first')" >first</a></td></tr>
<tr><td><a href="" onclick="showdiv('second')" >second</a></td></tr>
<tr><td><a href="" onclick="showdiv('third')" >Third</a></td></tr>
</table>
I am developing a site where I can NOT use jQuery (please, no comments on how good is it, it's prohibited) and I need to reproduce something like .toggle() just for show/hide a div with a class.
I've a group of boxes with a arrow, this arrow can expand a submenu. Let's see an example:
<div class="box">
<div class="box-utils">
</div>
<h2>Example case</h2>
<div class="box-submenu hidden">
<ul />
</div>
</div>
I need that click on the <a /> inside the <div class="box-utils" /> shows/hide the box-submenu class. When it's hidden, the <a /> needs to have class="down", when it's not hidden it needs to be class="up". This also needs to work with more than one case in the same page.
Can someone help me?
Thank you in advance!
Create a toggle function like the one below, provide an id attribute on your DIV (call it box-submenu or something) and call the function from your anchor, and use the ID to lookup whatever you want to hide/show.
<script language="javascript">
function toggle() {
var ele = document.getElementById("box-submenu");
var link = document.getElementById("linkId");
if(ele.style.display == "block") {
ele.style.display = "none";
link.className = "down";
}
else {
ele.style.display = "block";
link.className = "up";
}
}
</script>