I know that it might have been asked billion times, but I could not find any solutions. So, here is my code:
.btn {
width: 200px;
height: 45px;
}
.--selected {
background-color: red;
}
<div class="container">
<button class="btn --selected">uno</button>
<button class="btn">dos</button>
</div>
I need to make that after pressing button it added a --selected class to it, and another one lost it, as if it is a switch between two
Help me out, please
This will add the class to the button clicked and removes the class from all other elements with the class btn.
I changed the classname a little to make it a valid css class name too.
$('.btn').on('click', function() {
$(this).addClass('selected');
$('.btn').not(this).removeClass('selected');
});
.btn {
width: 200px;
height: 45px;
}
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="btn">uno</button>
<button class="btn">dos</button>
</div>
You can try with removeClass() and toggleClass().
Please Note: --selected is not a valid class name. Double dash (--) is used to comment code in CSS. Though you can use like single, triple consecutive dashes, it is good practice to avoid those naming pattern.
$('.btn').click(function(){
$('.selected').removeClass('selected');
$(this).toggleClass('selected');
});
.btn {
width: 200px;
height: 45px;
}
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="btn selected">uno</button>
<button class="btn">dos</button>
</div>
This can be done easily using vanilla Javascript and ES6 as below, not need to add extra library:
const btns = Array.from(document.querySelectorAll('.btn'));
const toggleClass = (e) => {
for (var el of btns) {
el.classList.remove('--selected')
}
e.currentTarget.classList.add('--selected')
}
for (var el of btns) {
el.addEventListener('click', toggleClass)
}
.btn {
width: 200px;
height: 45px;
}
.--selected {
background-color: red;
}
<div class="container">
<button class="btn --selected">uno</button>
<button class="btn">dos</button>
</div>
this code might help you.
Simple:
$('.btn').click(function() {
$('.btn').removeClass('--selected');
$(this).addClass('--selected');
});
Related
When the box is clicked on the insides for each of the boxes are shown, I only want one to show up at a time.
function select() {
const outside = document.querySelectorAll('.box')
const insides = document.querySelectorAll('.insides')
insides.forEach(insides => {
outside.forEach(box => {
box.addEventListener('mouseenter', (e) => {
box.setAttribute("id", "selected")
box.addEventListener('click', (e) => {
box.classList.add('hover')
if (document.getElementById('selected')) {
insides.classList.add('insidesHover')
}
})
})
box.addEventListener('mouseleave', (e) => {
box.classList.remove('hover')
box.setAttribute('id', 'testBox')
insides.classList.remove('insidesHover')
})
})
})
}
function newOption() {
var optionRow = document.createElement("div");
optionRow.setAttribute("class", "answers");
optionRow.setAttribute("id", "optionRow");
var option = document.createElement("input");
option.setAttribute("type", "radio");
option.setAttribute("name", "options");
option.setAttribute("id", "options");
var optionBox = document.createElement("div");
optionBox.setAttribute("class", "answerContainer")
optionBox.setAttribute("id", "optionBox")
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "option");
text.setAttribute("id", "option");
text.setAttribute("placeholder", "Enter Option");
optionBox.append(optionRow);
optionRow.append(option);
optionRow.append(text);
document.getElementById("selected").append(optionRow);
array()
}
.testContainer {
width: 50%;
margin-left: 25%;
margin-top: 1%;
padding: 1%;
background-color: #333;
height: auto;
color: white;
}
.box {
background-color: white;
color: black;
padding: 25px;
border: 5px blue solid;
}
.hover {
border: #780119 5px solid;
}
.insides {
display: none;
}
.insidesHover {
display: flex;
}
.buttons {
display: none;
}
.buttonsHover {
display: flex;
height: 25px;
width: 25px;
border: 1px solid black;
border-radius: 100%;
}
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
So the problem I am having is that I want to use a querySelectorAll() for the class of .box, which on click changes the outline to show it is being selected. Which is something that is fully functional and works. However, I also want it to show the inside pieces on click as well but only for one box at a time, which on the event listener of leave will disappear again. Once the inside of adding new options goes away, I need the options that were put in to stay. I have tried putting everything in one div class where the opacity is set to 0, but it makes it so the new options don't stay visible. I have also tried rearranging the variables so that the insides are affected first, which had no effect on the actual functionality. I believe the true issue lies in the fact that when the id, selected, is active it triggers all boxes to be active instead of individual ones. I am not entirely sure how to go about rectifying this issue and would like some advice on moving forward. If you have any questions or if something needs clarification please let me know! Thank you for your time and wish you all a good day!
I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style
I have two buttons. When one is clicked, I want it to turn from gray to black and stay black unless the page is refreshed or the other button is clicked. If the other button is clicked, I would like it to turn black and for the first one to go back to gray. I assume JS is the best way for this, but I'm not sure how to do it.
Here is some of my code below:
HTML:
<a id="button"></a>
<a id="button"></a>
CSS:
#button {
display:inline-block;
height:10px;
width:10px;
border-radius:10px;
background-color:gray;
}
Many thanks in advance.
ID names should not be reused, change them to a class name instead, but they will still need an unique ID name each for us to apply Javascript logic to them.
html:
<a id="button1" class="button"></a>
<a id="button2" class="button"></a>
css:
.button
{
display:inline-block;
height:10px;
width:10px;
border-radius:10px;
}
Javascript:
document.getElementById("button1").style.backgroundColor ="gray";
document.getElementById("button2").style.backgroundColor ="gray";
document.getElementById("button1").onclick = function(){
this.style.backgroundColor ="black";
document.getElementById("button2").style.backgroundColor ="gray";
};
document.getElementById("button2").onclick = function(){
this.style.backgroundColor ="black";
document.getElementById("button1").style.backgroundColor ="gray";
};
Here's an example I whipped up with no JavaScript - instead I'm using two radio buttons that are styled depending on which one is "checked".
http://codepen.io/capitalq/pen/gLWLMK
.button {
-webkit-appearance: none;
appearance: none;
border: 0;
background: gray;
height: 50px;
width: 50px;
margin: 10px;
outline: none;
display: inline-block;
border-radius: 50%;
}
.button:checked {
background: black;
}
<input type="radio" class="button" name="buttons" id="button1" />
<input type="radio" class="button" name="buttons" id="button2" />
Use the jquery addClass function to add a class with a set background.
The class will remain until there is a page load.
CSS Only aproach is :active, but it will not work on buttons, because the active property fades away once you release the click button. Maybe using an tag disguised as button may work, but will fade away once it losses the active state.
With jQuery you can do it quite easily.
$('#buttons .item').on("click",function(){
$("#buttons .item.active").removeClass('active');
$(this).addClass("active");
});
button{
color: white;
}
.item{
background-color: gray;
}
.active{
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<button class="item">Button 1</button>
<button class="item">Button 2</button>
<button class="item">Button 3</button>
</div>
<style media="screen">
#buttonA, #buttonB {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 10px;
background-color: gray;
}
</style>
<a id="buttonA"></a>
<a id="buttonB"></a>
<script type="text/javascript">
var buttonA = document.querySelector('#buttonA');
var buttonB = document.querySelector('#buttonB');
var changeColour = function (e) {
if (e.target === buttonA) {
buttonA.style.backgroundColor = 'black';
buttonB.style.backgroundColor = 'gray';
}
if (e.target === buttonB) {
buttonB.style.backgroundColor = 'black';
buttonA.style.backgroundColor = 'gray';
}
};
buttonA.addEventListener('click', changeColour, false);
buttonB.addEventListener('click', changeColour, false);
</script>
There is an HTML button element. So if you want to mark up a button on your page, you really ought to use:
<button type="button"></button>
Here is an approach using <button> and classList in javascript:
var buttons = document.getElementsByTagName('button');
function paintItBlack() {
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('clicked');
}
this.classList.add('clicked');
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click',paintItBlack,false);
}
.clicked {
color: rgb(255,255,255);
background-color: rgb(0,0,0);
}
<button type="button">Button A</button>
<button type="button">Button B</button>
JavaScript is unnecessary at this time. Use this code in your .css file or in the "style" tag on the html file.. It will be black when the mouse is over it and after you click.
a:hover
{
background-color:black;
}
a:target
{
background-color:black;
}
I have some div i want change selective div position to center means suppose I select the first two div only that div text move to center on click
$("#key").click(function myfunction() {
$("div").css("text-align", center);
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
You don't need to give name to click function. It can be anonymous. Also it should be $("div").css("text-align", 'center') to assign a css property.
function myfunction() {
//Not sure why you have this on div.
}
$(document).ready(function() {
$("#key").click(function() {
$("div").css("text-align", 'center')
});
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
Set(toggle) selected class on click of element
Remove inline event onselect
Set center property to only those elements which are having selected class
Set property in quotes, $("div").css("text-align", 'center');
$("#key").click(function myfunction() {
$("div.toGrab:not(.selected)").css("text-align", '');
$("div.selected").css("text-align", 'center');
});
$("div.toGrab").on("click", function() {
$(this).toggleClass('selected');
});
div {
background-color: yellow;
margin-top: 20px;
cursor: pointer;
}
.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div class='toGrab'>blabla</div>
<div class='toGrab'>cat</div>
<div class='toGrab'>rose</div>
Just a minor miss, need to assign value as string as shown below:
$("#key").click(function() {
$("div").css("text-align", "center");
});
If you want to give margin than also number will be specified as string as:
$("#key").click(function() {
$("div").css("padding", "50");
});
#aswathy your all code is okay, only you missed "text-align", 'center'
center property should be in single quotes
$("#key").click(function myfunction() {
$("div").css("text-align", 'center');
});
div {
background-color: yellow;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>
I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)