I have a web page with a div element (named apropos) diplayed. When the mouse is on a menu, I want the div to change to display another div named blog in the exact same spot.
For the moment, the blog div is displayed below the apropos one. The CSS for the two are the same.
An excerpt :
Blog
<div class="apropos"><p>lorem ipsum1</p></div
<div class="blog"><p>lorem ipsum2</p></div>
<script>
function show_blog() {
document.getElementsByClassName("apropos")[0].style.visibility = "hidden";
document.getElementsByClassName("blog")[0].style.visibility = "visible";
}
function hide_blog() {
document.getElementsByClassName("apropos")[0].style.visibility = "visible";
document.getElementsByClassName("blog")[0].style.visibility = "hidden";
}
</script>
You need to use display property, not visibility, because it leaves space like if the element still was there:
function show_blog() {
document.getElementsByClassName("apropos")[0].style.display = "none";
document.getElementsByClassName("blog")[0].style.display = "block";
}
function hide_blog() {
document.getElementsByClassName("apropos")[0].style.display = "block";
document.getElementsByClassName("blog")[0].style.display = "none";
}
As answered, change the visibility to display property.
Just to add another approach to the answer, this could be easily solved with just css. Since the elements are siblings, you could use the sibling selector:
#blogAnchor:hover ~ .blog
#blogAnchor:not(:hover) ~ .apropos{
display: block;
}
#blogAnchor:hover ~ .apropos,
#blogAnchor:not(:hover) ~ .blog{
display: none;
}
<a id="blogAnchor" href="#">Blog</a>
<div class="apropos"><p>lorem ipsum1</p></div>
<div class="blog"><p>lorem ipsum2</p></div>
Related
Hi New Developer here!
I have a bunch of elements that are constantly being toggled (hiding and showing back and forth)
But I want to make it so if all the elements are hidden then display a starting/welcome message.
I started writing the if condition like this:
((the reason why I wrote if the startingContainer is NOT = to display none is because there is no way to identify for the other elements to be display block since .show() doesnt necessarily make it display block right? I could totally be wrong in saying that.))
Is it possible to write if something is not hidden then take action like the below?
if($('#startingContainer').css('display') != 'none'){
//put some show functions
alert("completed");
}
You may try this approach without using if block.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<p>Click The Button to Toggle Displaying the Text</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is the Div Element with Text which will be shown or hidden when you click the Button.
</div>
I used the following code to toggle a button class in order to make a full-screen mobile menu.
HTML
button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});
Now I would like to hide another item in my header when the toggled class .is-active is present.
The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.
jQuery(function($) {
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
}
});
Appreciate any help :) !
you have to show the element again after the burger menu closes:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
// hide / show other element
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
} else {
$('.rey-headerCart-wrapper').show();
}
});
});
});
Or in vanilla javascript:
window.addEventListener("load", () => {
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".hamburger--slider").classList.toggle("is-active");
// hide / show other element
const cart = document.querySelector(".rey-headerCart-wrapper");
if (document.querySelector(".hamburger--slider.is-active")) {
cart.style.display = "none";
} else {
cart.style.display = "block";
// apply original display style
// cart.style.display = "inline-block";
// cart.style.display = "flex";
};
});
})
In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.
In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).
This can get quite messy really fast.
A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.
That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.
$('.nav-toggler').on('click', function() {
$('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
padding: 1em;
margin: 2px;
}
.cart {
background: #FFF000;
}
.menu{
background: #F1F1F1;
display: none;
}
#nav-wrapper.active > .menu {
display: block;
}
#nav-wrapper.active > .cart {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
<button class="nav-toggler">Toggle</button>
<div class="menu">My Menu</div>
<div class="cart">My Cart</div>
</div>
I have a CSS id that both hides visibility and displays: none. When I click the button I would like for it to display. However, the only way I am able to make it work is by removing the display:none. I do not want this because it is an invisible element causing design to be messed up.
Ultimately the goal is to click button, make some elements disappear and some elements appear.
Here is the HTML
<div class="fwork1" id="fwork1">
<a href="#portfolio" onclick="fWork1()">
<img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt="">
</a>
</div>
<div id="hwork1">
<p>some text</p>
</div>
<div id="fWorkReturn">
<button onclick="fWorkReturn()">Click</button>
</div>
Here is the CSS
#hwork1 {
visibility: hidden;
display: none;
}
Here is the Javascript
function fWork1() {
document.getElementById("fwork2").style.display = "none";
document.getElementById("fwork3").style.display = "none";
document.getElementById("fwork4").style.display = "none";
document.getElementById("hwork1").style.display = "block";
}
function fWorkReturn() {
document.getElementById("fwork1").style.display = "initial";
document.getElementById("fwork2").style.display = "initial";
document.getElementById("fwork3").style.display = "initial";
document.getElementById("fwork4").style.display = "initial";
document.getElementById("hwork1").style.visibility = "hidden";
}
JSFiddle
The best way to handle this would be to add a class when you click on you element. your js would look like this:
function fWork1() {
document.getElementById("fwork2").classList().add('active');
}
and you CSS will look like this:
#hwork1 {
display: none;
}
#hwork1.active {
display: block;
}
Change your code like this -
function hide() {
document.getElementById("fwork2").style.visibility = "";
document.getElementById("fwork3").style.visibility = "";
document.getElementById("fwork4").style.visibility = "";
document.getElementById("hwork1").style.visibility = "";
}
function show() {
document.getElementById("fwork1").style.visibility = "hidden";
document.getElementById("fwork2").style.visibility = "hidden";
document.getElementById("fwork3").style.visibility = "hidden";
document.getElementById("fwork4").style.visibility = "hidden";
document.getElementById("hwork1").style.visibility = "hidden";
}
This is how you can change the visibility of an element with JavaScript. The current code changes the visibility property of some elements when the function is called / button is clicked. It should be fairly straightforward how to apply this in another context.
function hideFourAndShowSix(){
let four = document.getElementById('four');
let six = document.getElementById('six');
six.style.setProperty('visibility', 'visible');
six.style.setProperty('display', 'list-item');
four.style.setProperty('visibility', 'hidden');
}
#six{
visibility: hidden;
display: none;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li id="four">Four</li>
<li>Five</li>
<li id="six">Six</li>
</ul>
<button onclick="hideFourAndShowSix()">Hide no. 4 and show no.6</button>
PS: If you need extra explanation drop in a comment ;).
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";
I have 2 divs which and I want to be able to toggle between them onClick of a button (currently using .toggle();)
The div that shows on the page is div1. This div has the style 'display:inline'.
My other div (div2) starts with the style 'display:none'.
When the div1 switches to div2, I want div2 to have the style of "display:inline". How do I do this?
EDIT: This is working:
$(function(){
$('#button').click(function(){
$('#div1').toggleClass('hide');
if ($('#div2').is('.hidden')) {
$('#div2').removeClass('hidden');
$('#div2').addClass('show');
}
else{
$('#div2').addClass('hidden');
$('#div2').removeClass('show');
}
});
});
I would use .toggleClass() as toggle switches between display: inline; and display: block;
Create a hidden and inline class and just toggle those.
Using plain JavaScript, you could use:
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'inline';
Here is a simple way to do it:
For the html, we have a simple button to call the "toggleFunction" that will add and remove display classes to our Div elements as necessary.
<button onclick="toggleFunction()" >Click to toggle</button>
<div id="div1" class=" " > Now showing "Div 1" </div>
<div id="div2" class=" " > Now showing "Div 2" </div>
We'll set the default display properties of Div 1 and Div 2 to "inline" and "none" respectively, so that by default:
Div 1 is Shown, and
Div 2 is Hidden.
Here is the css for that:
#div1 {
display: inline;
color:blue;
}
#div2 {
display: none;
color:red;
}
.display-none {
display: none !important;
}
.display-inline {
display: inline !important;
}
Finally, we'll use Jquery to add and remove the "display-none" and the "display-inline" classes to Div 1 and Div 2 respectively by calling our "toggleFunction" when the button is clicked.
Here is the Jquery for that:
function toggleFunction() {
$("#div1").toggleClass("display-none");
$("#div2").toggleClass("display-inline");
}
You can try it out on codepen here: http://codepen.io/anon/pen/vEbXwG
Make your own if clause to toggle the div's style:
$(document).on("click","#mybutton",function(){
var toggled=$("#mydiv");
// instead of this which would make a block appear
// toggled.toggle();
// do this: create your own toggle if clause.
if(toggled.is(":visible"))
toggled[0].style.display="none";
else
toggled[0].style.display="inline";
});
#mydiv{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv">hello</div>
<button id="mybutton">toggle</button>