I'm trying to use buttons to filter a list of elements in a page.
So far if one of the buttons is clicked all the others will be disabled and then if I click a different one then only that will be enabled and the others will be disabled.
I cannot work out how to toggle it so if the button was already active it would un-disable all buttons including itself.
JS Fiddle
html:
<div class="calendar-filter">
<i class="material-icons"></i>Duty NCO
<i class="material-icons"></i>Main Cadets
<i class="material-icons"></i>Wing Marching Team
<i class="material-icons"></i>Juniors
<i class="material-icons"></i>Exercise
<i class="material-icons"></i>Other
</div>
js:
function filterButtonClick(buttonClass) {
$('.calendar-color-key').each(function() {
$(this).addClass('disabled');
if($(this).hasClass(buttonClass)) {
$(this).removeClass('disabled');
}
});
}
$('.calendar-color-key').on('click', function() {
var filterButtonClasses = this.classList;
filterButtonClick(filterButtonClasses[0]);
});
$(".calendar-color-key").click(function() { //select by class
var clicked = $(this);
if (clicked.hasClass('toggle')) {
$('.calendar-color-key').removeClass('disabled'); //enable all again
clicked.removeClass('toggle');
} else {
$('.calendar-color-key').removeClass('toggle');
clicked.addClass('toggle');
clicked.removeClass('disabled');
$('.calendar-color-key').not(clicked).addClass('disabled'); //disable everything except clicked element
}
});
https://jsfiddle.net/6kx8ncdb/2/
Why not just use a class default class for your buttons like filter-button so when you want to disable them all just use:
$(".filter-button").addClass("disabled");
And use an active class it would be a big help so you can have
$(".active").on('click', function(){
$(".filter-button").addClass("disabled");
$(".active").removeClass("active");
});
UPDATE: don't forget to remove the active class when adding disabled I updated the code.
Related
Hi im new on js and honestly speaking we're just starting learning js on our school. What i want to do is once i already click it it will be reset and remove the class again. "myClass has a display none"
$(function() {
$("body").click(function() {
$(".parela").addClass('myClass');
});
});
You can use toggleclass
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
Use toggleClass, so at every click it will be added/removed automatically
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
You want to use toggleClass() which will toggle the class on and off depending on the click. note that for the demo below - I created the button that toggles the class on the button click.
Another way of doing it - since the only effect is to hide the element - is just .toggle() which toggles the display state without the use of the added class. The following snippet shows both methods.
$(function() {
$("#toggleButton").click(function() {
$(".parela").toggleClass('myClass');
});
$("#toggleButton2").click(function() {
$(".parela2").toggle();
});
});
.myClass{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using .toggleClass('myClass')</p>
<button type="button" id="toggleButton">clickMe</button>
<span class="parela"> Visible</span>
<hr/>
<p>Using just .toggle()</p>
<button type="button" id="toggleButton2">clickMe</button>
<span class="parela2"> Visible</span>
You can you use some sort of 'flag' variable to control the state.
You can name it whatever you want and make if statement to make decisions accordingly.
$(function() {
var flag = false;
$("body").click(function() {
if(!flag) {
$(".parela").addClass('myClass');
flag = true;
} else {
$(".parela").removeClass('myClass');
flag = false;
}
});
});
I'm trying to give the button a new content if it's clicked. I also add new classes. That work's perfectly fine on the first click but for some reason the innerhtml ins't changing after clicking a second time on it..
HTML:
<button class="btn btn-warning btn-invisible"><i class="fa fa-eye-slash"></i></button>
jQuery:
$('.btn-invisible').click(function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('.btn-visible').click(function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
I got this fiddle ready: https://jsfiddle.net/dthee9w6/7/
Would love if someone could help.
You should use 'on' instead of 'click', so that you can play with dynamically added elements.
$('body').on('click','.btn-invisible',function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('body').on('click','.btn-visible',function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
hope it helps.
Wrap your code in $(function(){}) ,which is $(document).ready(function(){
});, apart from this every thing is fine
There is no need to update the html each time on the click , all you need to do is add and remove neccessary classes.
For the first click, you are removing invisible class and what if one clicked next time, it tries to remove invisible class again which is not there, it throws an error here,you should use toggleClass
$(function() {
$('.btn-invisible').click(function() {
$(this).toggleClass('btn-invisible');
if (!$(this).hasClass('btn-visible')) {
$(this).addClass('btn-visible');
$(this).find('.fa').removeClass('fa-eye-slash').addClass('fa-eye');
}
});
$('.btn-visible').click(function() {
$(this).toggleClass('btn-visible');
if (!$(this).hasClass('btn-invisible')) {
$(this).addClass('btn-invisible');
$(this).find('.fa').removeClass('fa-eye').addClass('fa-eye-slash');
}
});
});
Hope it helps
I want to make social sidebar, which can be hidden when clicked on arrow.It hides by margin-left. I tried toggling classes, if statements, but it only hides it and doesn’t show after second click. This is my code now:
javascript-jQuery:
$(".socialArrow").click(function () {
$(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
});
var wrapper = document.getElementById("socialWrapper");
$(".fa-angle-left").click(function () {
wrapper.style.marginLeft = ("-80px");
});
$(".fa-angle-right").click(function () {
wrapper.style.marginLeft = ("0px");
});
html:
<div class="socialContainer">
<ul id="socialWrapper">
...some links...
</ul>
<span class="socialArrow">
<i class="arrowLeft fa fa-angle-left"></i>
</span>
</div>
Any idea how to fix it?
Sorry for my English , I’m not from UK/US.
So when the first $(".fa-angle-right") selector runs, there is no such class item yet, so the click() isn't applied to anything. You create an element with that class later. So you really need to rerun those click() assignments after your class change. Like:
function setClick() {
$(".fa-angle-left").click(function () {
wrapper.style.marginLeft = ("-80px");
});
$(".fa-angle-right").click(function () {
wrapper.style.marginLeft = ("0px");
});
}
$(".socialArrow").click(function () {
$(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
setClick();
});
var wrapper = document.getElementById("socialWrapper");
This way, your click event gets reset every time the classes change.
It should work with toggleClass, this way:
$(".socialArrow").click(function () {
$("#socialWrapper").toggleClass("closed");
});
and CSS:
#socialWrapper.closed {
margin-left: -80px;
}
I'm used to working with jQuery but I'm trying to get back to vanilla javascript. I have a link that when clicked will reveal an account modal.
I also want to change the class of the modal when clicked to 'modal-visible'. This works as expected, but then when I click the link again to close the modal, I need the class to change back to 'modal-hidden'.
I wondered if someone could help me with that. Perhaps it needs a toggle instead?
var accountModal = document.getElementById("account-modal");
document.querySelector('#account-photo').addEventListener('click', function(e) {
e.preventDefault();
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', 'false');
});
<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a>
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div>
Here's a way of doing it if we assume it always begins closed:
document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) {
e.preventDefault();
if(!is_visible) {
accountModal.classList.add('modal-visible');
accountModal.classList.remove('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = true;
} else {
accountModal.classList.remove('modal-visible');
accountModal.classList.add('modal-hidden');
accountModal.setAttribute('aria-hidden', !is_visible);
is_visible = false;
}
}});
This method basically acts as a manually coded toggle.
I have an HTML button created and I want to toggle the text that is displayed in the button between two text using Javascript/JQuery. How do I do this?
Currently, I have:
<button onclick="showAll();" class="collapse-classes">
<span class="button-text">Show</span>
</button>
The button starts off by displaying "Show" and then switch to "Hide" when clicked and then switch to "Show" when clicked again and onward. I tried changing the value of the tag but it doesn't change the text displayed. Can anyone help with the script? thanks
Don't use onclick. Just bind an event handler.
Here's something you can work with:
$('.collapse-classes').click(function() {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$this.text('Show');
} else {
$this.text('Hide');
}
});
Following your DOM tree
$('.collapse-classes').click(function() {
var span = $(this).find('span');
if(span.text() == "Show"){
span.text("Hide");
} else {
span.text("Show");
}
});