Inverting button action on click

Inverting button action on click - javascript

I'm working with WordPress site where I want to show elements on button click.
I found this script, but it works the opposite how I want - it hides, instead of shows content. How can I invert it?
I want it to be hidden when pages loads and appear when clicked on button
Preview: https://www.w3schools.com/code/tryit.asp?filename=GGXM3P219FCN
$(document).ready(function () {
var togBtn = $('.tog');
var allergerns = $('.allergerns');
togBtn.one('click', hideAllergerns);
function hideAllergerns() {
allergerns.fadeOut();
togBtn.one('click', showAllergerns);
}
function showAllergerns() {
allergerns.fadeIn();
togBtn.one('click', hideAllergerns);
}
});
.allergerns {
width: 100px;
height: 100px;
background-color: #4aa3df
}
.tog {
width: 60px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="tog">toggle</button>
<div class="allergerns"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Set the initial CSS styles.
Use JavaScript to toggle a specific class that shows your elements:
References should be stored inside a data-* Attribute, not by copy pasting code in case you need multiple toggling buttons or pane elements
Animations should be done using CSS, not jQuery. Preferably use GPU accelerable CSS properties like opacity, transform etc.
Finally, use jQuery's .toggleClass() to trigger a desired style-state
jQuery(function ($) { // DOM ready and $ alias in scope
$("[data-toggle]").on("click", function() {
$(this.dataset.toggle).toggleClass("is-active");
});
});
.pane {
overflow: auto;
background-color: #4aa3df;
width: 100px;
height: 100px;
transition: 0.3s;
max-height: 0;
opacity: 0;
}
.pane.is-active {
max-height: initial;
opacity: 1;
}
<button class="tog" data-toggle="#pane-1">Toggle 1</button>
<div id="pane-1" class="pane">Pane 1</div>
<button class="tog" data-toggle="#pane-2">Toggle 2</button>
<div id="pane-2" class="pane">Pane 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Related

How to make inner elements of a container not able to be clickable and selected

I want to implement a loading state where when we click on the button, we make the container opacity to .32 and we shouldn't be able to click or select the elements inside the container. In the example below, the inner a tag is still clickable and selectable after the loading is shown.
const container = document.getElementById('container');
const btn = document.getElementById('load');
btn.addEventListener('click', () => {
container.classList.add('loading');
})
#container {
width: 300px;
height: 300px;
background: tomato;
}
.loading {
opacity: .32;
user-select: none;
}
<div id="container">
Test
Test
Test
Test
</div>
<button id="load">
Load
</button>

Have you looked into using pointer-events: none; from CSS? See running snippet below.
const container = document.getElementById('container');
const btn = document.getElementById('load');
btn.addEventListener('click', () => {
container.classList.add('loading');
})
#container {
width: 300px;
height: 300px;
background: tomato;
}
.loading {
opacity: .32;
user-select: none;
pointer-events: none;
}
<div id="container">
Test
Test
Test
Test
</div>
<button id="load">
Load
</button>

I believe what you are trying to do is, disabling the anchor tag. For this, you can simply use the following property in the CSS: pointer-events: none;.
With this even if the anchor tag is clicked, nothing will happen.

Why button function only works once

i have sidebar if i click on button and then side bar appears from left, and when i click on body side bar hides, but why it is happening only for once.
FIDDLE
HTML
<body>
<div class="site-overlay"></div>
button ☰
<nav id="menu" class="panel" role="navigation">
<ul>
<li>Home</li>
<li>The Ballad of El Goodo</li>
<li>Thirteen</li>
<li>September Gurls</li>
<li>What's Going Ahn</li>
</ul>
</nav>
</body>
JS:
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
$('body').addClass('menu-open');
});
});
CSS:
a.menu-link {
float: right;
padding: 20px
}
nav#menu {
background: lightblue;
z-index: 100000000000000
}
.site-overlay {
display: none;
}
.menu-open .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
-webkit-animation: fade 500ms;
animation: fade 500ms;
}
HOW CAN I MAKE IT WORK IT MANY TIMES, instead of only one time.

After the click, you're showing your overlay, but because it has z-index: 9998, the overlay is being placed on top of the button, so when you try to click the button, you're actually clicking on the overlay, not on the button.
You should make an event when the overlay is clicked to remove that class, like this:
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })

This is because the added class is not removed.
You can control it by adding a toggle value for that button.

Instead of addClass put toggle.
On the way you put you will add "menu-open" once and it will never be removed.
you have more information about this here: https://www.w3schools.com/howto/howto_js_toggle_class.asp

You can do it by this JS code.
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
event.stopPropagation();
$('body').addClass('menu-open');
});
$('body').click(function(){
$('body').removeClass('menu-open');
})
});

Why can't I use javascript to change the visibility property to hidden

I'm using javascript, so that when a user presses a button, a div will appear/disappear by changing the visibility property of the div. It works when the div is hidden and I want it to appear. However, when I presses the button again, it does not become hidden as it should.
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
function getSmileys() {
var button = document.getElementById("SmileyDiv").style.visibility = 'visible';
// document.getElementById("SmileyDiv").style.visibility = 'visible';
if (button.visibility == 'hidden') {
button.visibility = 'visible'
} else {
button.visibility = 'hidden'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button" onclick="getSmileys()">&#128515</button>
</div>

This may solve your problem.
Changes I did,
I removed the onclick from the button. You don't need it as long as you have registered the click event in the JavaScript side.
I fixed your HTML as you had incorrect markup. _(You forgot to close the <script> tag, as well you forgot to close the second div tag.
I change the logic of your script to make it more performant.
<!DOCTYPE html>
<html>
<head>
<style>
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
</style>
</head>
<body>
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button
class="test"
id="SmileyButton"
style="font-size: 30px;float:left;"
type="button"
>&#128515</button>
</div>
</body>
</html>
<script>
// I get the SmileyDiv here. This is because it runs only once, and makes
// your script more performant.
var button = document.getElementById("SmileyDiv");
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
// I set the initial visibility status here
button.style.visibility = 'visible';
function getSmileys() {
// You had forgot to add the `.style` in the button property. That's
// why the button didn't worked properly.
if (button.style.visibility === 'hidden') {
button.style.visibility = 'visible'
} else {
button.style.visibility = 'hidden'
}
}
</script>

There are a couple of problems there.
You're assigning the result of document.getElementById("SmileyDiv").style.visibility = 'visible'; to button. The result of an assignment expression is the value that was assigned, so button will be "visible".
Then you're trying to use a visibility property on button, but strings don't have that property. You probably meant to assign the result of document.getElementById("SmileyDiv") to button, but even then, you'd need button.style.visibility, not just button.visibility.
The style property only reflects the element's directly-assigned style information, not anything applied to it by CSS. Your div doesn't have visibility: xxx in its style attribute, it inherits it via CSS. You need to use getComputedStyle to get the computed style of the div.
You're using addEventListener and an onclick, so your function is getting called twice. Just use addEventListener.
button is an odd variable name for a div. :-)
See comments:
document.getElementById("SmileyButton").addEventListener("click", getSmileys);
function getSmileys() {
// It's a div, not a button
var div = document.getElementById("SmileyDiv");
// ** Get the *computed* style of the div
var style = getComputedStyle(div);
if (style.visibility !== 'hidden') {
div.style.visibility = 'hidden'
} else {
div.style.visibility = 'visible'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
visibility: hidden;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button">&#128515</button>
</div>

You are checking for button.visibility. Your button does not have a visibility attribute. You should check for button.style.visibility. You are also assigning the click listener twice, once in JS and the other in your HTML. This would cause the hide/show process to be reversed everytime.
var button = document.getElementById("SmileyButton");
button.addEventListener("click", getSmileys);
function getSmileys() {
var smileyDiv = document.getElementById("SmileyDiv");
if(smileyDiv.style.visibility == 'hidden') {
smileyDiv.style.visibility = 'visible'
} else {
smileyDiv.style.visibility = 'hidden'
}
}
.enterPostBackground {
background-color: gainsboro;
width: 400px;
height: 50px;
}
#SmileyDiv {
height: 80px;
width: 160px;
background-color: grey;
overflow: scroll;
}
<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
<button class="test" id="SmileyButton" style="font-size: 30px;float:left;visibility:hidden" type="button">&#128515</button>
</div>

How to prevent links from being tab stops when they're not hidden with display block?

I'm trying to implement a simple dropdown with a slideDown effect. To build this effect I used a CSS transition applied to the height property.
Problem is that if I press the Tab ↹ key, any targetable element (tab stops) inside the dropdown will be targeted, even when it is hidden as I am not using display: none.
Here's the code:
const button = document.getElementById('button');
const dropdown = document.getElementById('dropdown');
dropdown.style.setProperty('height', 'auto', 'important');
dropdown.style.setProperty('height', dropdown.clientHeight + 'px');
button.addEventListener('click', function(e) {
e.target.classList.toggle('active');
e.target.nextElementSibling.classList.toggle('active');
});
#dropdown {
overflow: hidden;
transition: height 330ms linear;
background-color: lightgrey;
height: 200px;
}
#dropdown:not(.active) {
height: 0 !important;
}
#dropdown.active {
visibility: visible;
}
<button id="button">Click me!</button>
<div id="dropdown">
I should not be accessible with tab when dropdown is hidden
</div>
<div id="info">This link will be focused after three tabs, instead of two: Tab me!</div>
I have tried to modify the code a little bit using the transitionend event to add and remove display: none when the transition ends thus making any targetable elements inside the dropdown untargetable, but this messes up with the starting animation of the transition.
See:
const button = document.getElementById('button');
const dropdown = document.getElementById('dropdown');
dropdown.style.setProperty('height', 'auto', 'important');
dropdown.style.setProperty('height', dropdown.clientHeight + 'px');
dropdown.classList.add('hidden');
button.addEventListener('click', function(e) {
if (!e.target.classList.contains('active'))
dropdown.classList.remove('hidden');
e.target.classList.toggle('active');
e.target.nextElementSibling.classList.toggle('active');
});
dropdown.addEventListener('transitionend', function(e) {
dropdown.classList.add('hidden');
});
#dropdown {
overflow: hidden;
transition: height 330ms linear;
background-color: lightgrey;
height: 200px;
}
#dropdown:not(.active) {
height: 0 !important;
}
#dropdown.active {
visibility: visible;
}
a {
display: block; /* so it doesn't move when dropdown is hidden */
}
.hidden {
display: none;
}
<button id="button">Click me!</button>
<div id="dropdown">
I should not be accessible with tab when dropdown is hidden
</div>
<div id="info">This link will now be focused after <strong>two</strong> tabs, as expected: Tab me!</div>

Try setting attribute "tabindex" to -1, this should prevent link from selecting with tab. You can also simply remove this attribute with JS when dropdown is active

You can modify the element’s tabIndex (-1 to make it untargetable, very high number to make it targeted last). How to ignore HTML element from tabindex?

Changing the hide show toggle effect?

I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)

Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.

You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>

$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/

Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>

Develop Reference

JavaScript is the programming language of the Web.

Inverting button action on click - javascript

Related

How to make inner elements of a container not able to be clickable and selected

Why button function only works once

Why can't I use javascript to change the visibility property to hidden

How to prevent links from being tab stops when they're not hidden with display block?

Changing the hide show toggle effect?

Categories

Resources