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 ;).
Related
I have a piece of code that shows a div on click of the parent div. I want to be able to hide this child div when I click the parent div again.
I can't figure this out.
I don't understand if it has to be in a separate function or not? How do I check if it was clicked before (maybe if the child div is shown? really confused on how to do that).
Thanks for your help,
document.getElementsByClassName('article-title')[i]
.addEventListener('click', function (event) {
articleDescription.style.display = "block";
}
My code is very very long, but the showing the div on click works perfectly. Hence me not posting the entire code. I just need some help in seeing what direction I need to head into to make it disappear after a second click
The snippet below should work for you. Basically, it uses window.getComputedStyle(this.children[0]).getPropertyValue("display") to check if the element is visible or not. If it is visible, it shows the div. If it is not visible, it hides the div.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
articleDescription = document.getElementsByClassName("article-description");
articleTitles = document.getElementsByClassName('article-title');
for (var i = 0; i < articleTitles.length; i++) {
articleTitles[i]
.addEventListener('click', function(event) {
if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "none") {
this.children[0].style.display = "block";
}
else if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "block") {
this.children[0].style.display = "none";
}
})
}
.article-title {
width: 300px;
height: 50px;
background-color: red;
}
.article-description {
width: 300px;
height: 50px;
background-color: yellow;
display: none;
}
<div class="article-title">
<div class="article-description"></div>
</div>
<div class="article-title">
<div class="article-description"></div>
</div>
<div class="article-title">
<div class="article-description"></div>
</div>
<div class="article-title">
<div class="article-description"></div>
</div>
<div class="article-title">
<div class="article-description"></div>
</div>
You need to add a condition to check does that child element have the styledisplay:block or not. It's a toggle function.
var articleTitle = document.getElementsByClassName('article-title');
for(let i=0; i<articleTitle.length; i++){
articleTitle[i].addEventListener('click', function (event) {
let target = event.target;
let articleDescription = target.firstElementChild;
articleDescription.style.display = (articleDescription.style.display == 'none') ? 'block' : 'none';
});
};
<div class="article-title">parent
<div class="article-description">child</div>
</div>
<div class="article-title">parent
<div class="article-description">child</div>
</div>
your Problem gets easier if you add classes on your elements and handle the hiding via CSS.
jQuery Example:
$(".parent").click(function(){
$(".parent").toggleClass("clicked");
});
.child{
display: none;
}
.parent.clicked .child{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
parent
<div class="child">child</div>
</div>
I am trying to make an element #mask123 visible or hidden upon click. By default, the element is hidden, but as I click it becomes visible. The js below works on first click, and the element turns visible. Now, I would like to click on the same button #menu-btn-toggle and the element toggles into invisible mode, which I cannot make it work. I am using inline css here. This is a simple case but my limited knowledge on js is not helping me.
<div id="menu-btn">
<a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();">
</div>
the html code
<div class="side-nav--mask">
<div class="js-side-nav-mask liquid-container">
<div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;"></div>
</div>
</div>
Here is my JS:
<script type="text/javascript">
function showMask() {
var node = document.getElementById('mask123')
node.style.visibility = 'visible';
}
</script>
When I try to a condition (below) it does not work:
<script type="text/javascript">
function showMask() {
var node = document.getElementById('mask123')
node.style.visibility = 'visible';
if node.is(":visible") {
node.style.visibility = 'hidden';
}
}
</script>
function showMask() {
var node = document.getElementById('mask123');
if (node.style.visibility=='visible') {
node.style.visibility = 'hidden';
}
else
node.style.visibility = 'visible'
}
This is how you should use your if condition :)
Try to toggle the visibility property based on current value of it,
function showMask() {
var node = document.getElementById('mask123')
var visibility = node.style.visibility;
node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}
You are accessing the jquery's is() function over a plain node object. Node object doesn't have function called is in its prototype.
.is is a jquery method. To use it, you first need to wrap your element/selector with jquery - $('#mask123').is(':visible').
But you don't actually need jquery for this, you can do it in basic JS:
function showMask() {
var node = document.getElementById('mask123')
if (node.style.visibility === 'visible') {
node.style.visibility = 'hidden';
} else {
node.style.visibility = 'visible';
}
}
If you don't mind using jQuery you can use a simple function and a CSS class:
// after removing onclick="" attribute from html
$('#menu-btn-toggle').click(function(){
$('#mask123').toggleClass('visible');
});
#mark123.visible{
visibility: visible;
}
Note that in this case you also have to specify that #mask123 is initially hidden in order to do the transition to visible.
So you have to add this to your CSS
#mask123 {
visibility:hidden; /* initial state = hidden */
}
-
Working jsFiddle
Use ClassList.toggle and since you are using inline code you will need important
var btn = document.querySelector("#menu-btn-toggle"),
mask123 = document.querySelector("#mask123");
function classToggle() {
mask123.classList.toggle("visible")
}
btn.addEventListener("click", classToggle, false)
#mask123.visible{
visibility: visible!important;
}
<div id="menu-btn">
Click to toggle
</div>
<div class="side-nav--mask">
<div class="js-side-nav-mask liquid-container">
<div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;">Some text</div>
</div>
</div>
I have a nav bar in the form of a ul with several li elements and with the last li (named 'more') having its own sub-menu in the form of another ul. I was trying (and was successful) in making it so that the sub-menu's original state is visibility:visible; and then when the user clicks on li name 'more' it would toggle between visibility: visible; and visibility: hidden;
I used JavaScript and a counter with an if statement. The reason why I used the counter was because when I tried:
if(document.querySelector('#subMenu').style.visibility == "hidden")...;
But it wouldn't toggle.
My questions are:
Would this method of creating the toggle function be deemed acceptable in a professional front end developer workplace?
Is there a better way to toggle between visible and hidden on clicking an element using JavaScript ONLY (trying to get better at JavaScript)?
The code is as follows(I have only included the relevant code):
HTML
<ol id = "leftNav" class = "bothNavs">
<li class = "navs" id = "more">More<div class = "arrow"></div>
<ul class = "subMenu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ol>
CSS
.subMenu {
width: 160%;
padding: 5px 0px;
padding-left: 7px;
margin-left: 6px;
position: absolute;
top: 100%;
left:0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #2D2D2D;
list-style: outside none none;
z-index: 1001;
}
JavaScript
var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var counter =0;
more.addEventListener("click", toggle);
function toggle () {
if(counter === 0){
subMenu.style.visibility = "visible";
counter += 1;
} else {
subMenu.style.visibility = "hidden";
counter -= 1;
}
};
Thank you in advance for your answers.
I feel a better way of toggling visibility (or any style) is to toggle a class.
Consider something like this in your CSS:
.subMenu.is-visible {
visibility: visible;
}
Then your function just needs to look like this:
var menu = document.querySelector('.subMenu');
document.getElementById('more').addEventListener('click', function () {
menu.classList.toggle('is-visible');
}, false);
For a toggle you should use a boolean value rather than int:
var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var clicked = false;
more.addEventListener("click", function(evt) {
// This is called a ternary operator, it's basically
// a really simple if/else statement
subMenu.style.visibility = (clicked) ? "visible " : "hidden";
// This will set clicked to the opposite (not) value of what
// it currently is. Being that we're using a boolean
// it will toggle true/false
clicked = !clicked;
});
You should also read (and vote for) this - What is the difference between visibility:hidden and display:none?
You should not embed a <ul> inside a <li> element. There's all sorts of reasons why, but mostly it messes with the hierarchy and makes the HTML less meaningful.
Also the last time I had to tackle this problem it ended up looking something like this:
var subMenu = document.querySelector('.subMenu');
if (clicked) {
subMenu.style.visibility = "visible";
} else {
subMenu.style.visibility = "hidden";
}
Consider making it id instead of class incase you have other submenus it interferes with.
If you don't really need a counter, use a boolean:
var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
more.addEventListener("click", toggle);
function toggle () {
subMenu.style.visibility = subMenu.style.visibility != "hidden" ? "hidden" : "visible";
};
.subMenu {
width: 60%;
background: #2D2D2D;
list-style: outside none none;
color: white
}
<ol id = "leftNav" class = "bothNavs">
<li class = "navs" id = "more">More<div class = "arrow"></div>
<ul class = "subMenu" style="visibility: hidden">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ol>
Ideally, you'd modify this code to toggle a class instead of an inline CSS style, as James suggested in his answer.
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>
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";