Toggle icons added as invalid span attribute - javascript

I have a button on my website added with the code below:
<button class="filter-btn-open">Open <span uk-icon="chevron-down"></span></button>
The button has an icon added with this code: <span uk-icon="chevron-down"></span> for its default state.
However, I want to toggle that icon with another icon <span uk-icon="chevron-up"></span> when the button is clicked.
I am already changing the color of the button using the code below but I need to be able to changed the icon too.
$(document).ready(function () {
$('.red-btn').click(function () {
$(this).toggleClass("green-btn red-btn" );
});
});
The icon is however added using attribute rather than a class. How can I achieve this?

On click you can get the span element and then toggle its attribute chevron-down chevron-up as well.
$(document).ready(function() {
$('.red-btn').click(function() {
var $span = $(this).find("span");
if ($span.attr("uk-icon") === "chevron-down") {
$span.attr("uk-icon", "chevron-up")
} else {
$span.attr("uk-icon", "chevron-down")
}
$(this).toggleClass("green-btn red-btn");
});
});

Related

Open hidden elements one at a time?

please I am trying to create a FAQ like functionality, I have some elements hidden so when I click on a button it opens and hides it. I have been able to do this but I am not getting what I actually want. I might have done something wrong I suppose. So, there are 5 elements with the same className, this will help me target them all and run a for loop to kind of break them apart. However if I click on this button to open one of the element the other ones open.
const openBtn = document.querySelectorAll(".openBtn")
const openContent = document.querySelectorAll(".openContent")
for(btn of openBtn) {
btn.addEventListener('click', () => {
for(content of openContent) {
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
content.classList.add('flex')
} else {
content.classList.remove('flex');
content.classList.add('hidden')
}
}
})
}
So as you can see, If I click on the chevron icon for just one of the wither About Us, Careers or just any of the 5 every other one opens. How do I fix this ?
Since you aren't going to post even the most general version of your HTML, here is a general outline.
First, each button gets a data attribute for target,then each FAQ div gets an ID attribute that matches the data target attribute.
I attach the click handler to the document and look for openBTN on the clicked element. Then I loop through every OPENED div to close it. Then I get the target data attribute and add the appropriate classes.
document.addEventListener("click", function(e) {
if (e.target.classList.toString().includes("openBtn")) {
let opened = document.querySelectorAll(".openContent.flex");
opened.forEach(function(el) {
el.classList.add("hidden");
el.classList.remove("flex");
});
let target = document.querySelector(e.target.dataset.target)
target.classList.remove("hidden");
target.classList.add("flex");
}
});
.hidden {
display: none
}
<button data-target="#faq1" class="openBtn">OPEN</button>
<div id="faq1" class="openContent hidden">1</div>
<button data-target="#faq2" class="openBtn">OPEN</button>
<div id="faq2" class="openContent hidden">2</div>
<button data-target="#faq3" class="openBtn">OPEN</button>
<div id="faq3" class="openContent hidden">3</div>
<button data-target="#faq4" class="openBtn">OPEN</button>
<div id="faq4" class="openContent hidden">4</div>

How can i get the color value if i duplicate the input field in bootstrap colorpicker. can someone help me?

I have a problem to get the color value on input field when i duplicate it. How can i get the color value if i duplicate the input field in bootstrap colorpicker. can someone help me?
Change background color
Change background color
<script>
$(function () {
$('#cp4').colorpicker().on('changeColor', function (e) {
$('body')[0].style.backgroundColor = e.color.toString('rgba');
});
});
</script>
Please check the original code: https://itsjavi.com/bootstrap-colorpicker/
Thanks in advance!
I can't try it now, but you can try this
Change background color
Change background color
$(function() {
$('.cp4').colorpicker().on('changeColor', function() {
var value = $(this).colorpicker('getValue');
// do what you want
});
});
as comment discuss - you must have a unique id -so you could apply a class to each button - or wrap both in a parent with the id and call the function on the clik of the .btn class within the div.
<div id="cp4">
<a href="#" class="btn btn-default" >Change background color</a>
Change background color
</div
//js
<script>
$(function () {
$('#cp4 .btn').colorpicker().on('changeColor', function (e) {
$('body')[0].style.backgroundColor = e.color.toString('rgba');
});
});
</script>

Remove Class when current toggle is clicked

The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked

How to show button on div mouse hover

i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.
Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.
Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}
Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});
first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}

using datepicker on <div>

I want to add datepicker on but it should have been in HIDE state. on click of div it should show datepicker. Just like on input tag.
I have tried using Button Text and Icon to show it but was not able to display it without input field.
You can do something like this:
HTML:
<div id="control">Click for calendar</div>
<div id='dp'></div>
JS/Jquery:
var cal = $('#dp').datepicker();
cal.hide();
$('#control').on('click', function() {
if (cal.is(':hidden')) {
cal.show();
} else {
cal.hide();
}
});​​​​​​​​​​​
Example jsFiddle: http://jsfiddle.net/aztechy/dpAWV/

Categories