Div hide/show toggle issue - javascript

I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.

Have you tried style.visibility (visible|hidden) instead of style.display?

Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;

Related

I'm trying to make a show/hide style button to display in woocommerce product description for a chunk of text

So I am fairly new to coding in general and I am currently working on an eCommerce website to develop my skills.
Using woocommerce in WordPress, I am trying to add a 'show/hide' style button to display or hide a chunk of text using JS, but not sure where I'm going wrong. Here is my JS code which is situated in my functions.php file:
var i=0;
function read(){
if(!i){
document.getElementByID("batbut").style.display ="inline";
document.getElementByID("read").innerHTML="Close";
i=1;
}
else{
document.getElementByID("batbut").style.display ="none";
document.getElementByID("read").innerHTML="Battery Warning Info";
i=0;
}
}
"batbut" is the span id for the chunk of text
"read" is the button id
"read()" is the onclick attribute
the chunk of text is currently hidden using css:
#batbut {
display: none;
}
any help would be much appreciated and if any more information is required just lmk. Thanks!
Try something like this,
check if your DOM nodes exists if yes the toggle based on the current display state of the batbut element
function read() {
const elmBatbut = document.getElementById("batbut");
const elmRead = document.getElementById("read");
if (!elmBatbut || !elmRead) return;
if (elmBatbut.style.display === 'none') {
elmBatbut.style.display = "inline";
elmRead.innerHTML = "Close";
} else {
elmBatbut.style.display = "none";
elmRead.innerHTML = "Battery Warning Info";
}
}

How to make div disappear after clicking the button? [duplicate]

This question already has answers here:
Show/Hide Requires a Double-click
(2 answers)
Closed 2 years ago.
Like in the topic. After clicking empty gear (norm) I want to make it change to filled (hov) and show up div (show), but it doesn't work.
Before using ifs everything was working, so there must be something wrong with them.
js:
function list() {
if (document.getElementById('hov').style.display === 'none') {
document.getElementById('norm').style.display = 'none';
document.getElementById('hov').style.display = 'flex';
document.getElementById('show').style.display = 'grid';
}
if (document.getElementById('hov').style.display === 'flex') {
document.getElementById('norm').style.display = 'flex';
document.getElementById('hov').style.display = 'none';
document.getElementById('show').style.display = 'none';
}
}
html:
<button class="men" onclick="list()"><img id="norm" src="img/gearw.png" height="28px"><img id="hov" src="img/gearwhover.png" height="28px"></button>
Did you write link to JQuery?
write <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> into the end of the body, but before body. If it doesn't work, sorry( I can't give another advice
I think you have a bit of a misunderstanding of what display does (you can read up on it here: https://www.w3schools.com/cssref/pr_class_display.asp). Setting it to none won't make it invisible. Instead, you could use visibility.
For example:
function list() {
var norm = document.getElementById("norm");
var hov = document.getElementById("hov");
if (hov.style.visibility === "hidden") {
norm.style.visibility = "hidden";
hov .style.visibility = "visible";
} else if (hov.style.visibility === "visible") {
norm.style.visibility = "visible";
hov .style.visibility = "hidden";
}
}
<button class = "men" onclick = "list()">
<img id = "norm" src = "img/gearw.png" height = "28px">
<img id = "hov" src = "img/gearwhover.png" height = "28px" style = "visibility: hidden">
</button>
Other than that, your code seems very weird (your JS talks about a "show" element that's not in your HTML document?), and its not quite clear from the question what you're trying to accomplish. There probably is a much more elegant way to do what you want, but without telling us, we can't know.
If I were to guess, I'd say that you were trying to make the image on the button change when the user hovers over it, in which case you'd probably be better off using CSS for that, but again I can't know for sure.
Anyways, I wish you the best of luck in your project!

Javascript - hide a Div

Sorry, I am new to stack overflow so hope I am doing this correctly.
I have the following code:
{
if (session.findById("T1").text == "") {
document.getElementById("W1").style.display = 'none';
} else {
document.getElementById("W1").style.display = 'inline';
}
}
Basically it is saying if T1 is blank, then W1 should not show. If T1 is not blank, W1 will show.
I can't get it working and then tried this by itself:
document.getElementById("W1").style.display = 'none';
What happens is the item quickly disappears (flashes) but then comes back again. So it's kind of working but I want it to stay permanently hidden. Unless of course T1 contains text and then it should reappear.
How can I resolve?
Thanks!!
hey look at my example
function isEmpty() {
var sample = document.getElementById("sample");
var div = document.getElementById("divko");
if (sample.value.trim() == "") {
div.setAttribute("style", "display:none;");
} else {
div.removeAttribute("style");
}
}
<input id="sample" name="sample" onkeyup="isEmpty()">
<div id="divko" style="display:none;">Sample</div>
you can use following hide option
document.getElementById("W1").style.display = 'block';

reload div javascript only ajax needed?

please refer to JSFiddle link: https://jsfiddle.net/s11oo2gg/.
We are not allowed to use jQuery and iframe here.
The problem right now if you click on resistor first and hover over different content images then come back out by clicking the X mark, the content image would get stucked where you left off and would not load the the other content images properly. It would show a broken image link.
I like to reload only the <div id="slider1_contain"> everytime I click on <span class="closeButton">(X mark) so the target content images can be loaded accordingly.
I dont not want to have location.reload(); to resolve this when the X is click. I dont want to reload the whole page but only the div.
I saw people were asking the same question and solve it with AJAX. Do I need AJAX for this case? Or is there something we can do in the following javascript?
Thank you in advance!!
<script type="text/javascript">
function showContent(target){
document.getElementById(target).style.display = 'block';
document.getElementById("boxThumb").style.display = 'none';
}
function hideContent(target){
document.getElementById(target).style.display = 'none';
document.getElementById("boxThumb").style.display = 'block'
}
</script>
<script type="text/javascript">
var children = document.querySelectorAll('.toggle > section[id]');
function showDetailContent(target) {
// Simply loop over our children and ensure they are hidden:
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
// Now, show our child we want to show
document.getElementById(target).style.display = 'block';
}
</script>
If you want to reload just the div, you can use innerHTML.
document.getElementById(target).innerHTML = '<img src="image.jpg">';

hovering over image changes it to hoverimg. but after clicking the image, hover stops working

It works but there's a pesky bug I can't understand how to fix (i'm a beginner).
What happens is there are 3 image buttons (only showing code for 1 here) and when i hover over them, they change image, and revert when i take mouse off. This is the html.
When I click any of the 3 image buttons (javascript), it changes its own image, and sets the other 2 image buttons to the normal image.
After this point (clicking the image) the hovering html code doesn't work anymore.
function changeImage3() {
document.getElementById('MageBTN').src = 'images/Character/NotSelected_Mage.png';
document.getElementById('WarriorBTN').src = 'images/Character/NotSelected_Warrior.png';
}
<a href="#" onclick="changeImage3()"><img id="RogueBTN" src="images/Character/NotSelected_Rogue.png" alt="image"
onclick="this.src='images/Character/Selected_Rogue.png';
this.onmouseover = false; this.onmouseout = false;"
onmouseover="this.src='images/Character/Selected_Rogue.png';"
onmouseout="this.src='images/Character/NotSelected_Rogue.png';">
</a>
just suggestion.. Use simple css property..
#yourID a:hover{
//your image which want to show on hover
}
If I have understand correctly you want to lock the selected state of a button on click and unlock/reset to not-selected when another button is clicked. Therefore you have to store the state of the buttons so I suggest to move all functionality to a script. Since you have all images well ordered it's enough to change Sel/NotSel in the url.
window.onload = function() { // ensures that all elements are there
var buttons = {
RougeBTN: document.getElementById("RougeBTN"),
VertBTN: document.getElementById("VertBTN"),
BleuBTN: document.getElementById("BleuBTN")
},
locked;
function clicked() {
for (var btn in buttons) { // iterate over the buttons
var b = buttons[btn];
// if this button was clicked save the state
if (btn == b.id) locked = btn;
else {
b.src = b.src.replace('/Sel', '/NotSel');
}
}
}
function mover() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/NotSel', '/Sel');
}
function mout() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/Sel', '/NotSel');
}
for (var btn in buttons) { // now set the functions to all buttons
var b = buttons[btn];
b.onclick = clicked; b.onmouseover = mover; b.onmouseout = mout;
}
}
In html all buttons look like this:
<img id="RougeBTN" src="images/Character/NotSelected_Rouge.png" alt="image">

Categories

Resources