There are some buttons at my page i.e button "one", button "two" etc. There is a text too which contains "Set This".
Requirements:
When user click on the button "One",
(a) the button should be turned to dark background color(Selected/Active state)
(b) Text, "Set this" should be changed to text according to clicking button's text. In this case, "Set this" will be changed to "Set One"
When user click on the button "One" again,
(a) the button should be returned to it's previous state(light background version)
(b) Changed text ("Set One") should be reset and returned back to default state("Set This")
Same requirements for other buttons. I could make the requirements 1 and 2(a) But I can't make 2(b). How can I make it?
My fiddle Work: http://jsfiddle.net/learner73/VFPLf/
$('.btn').click(function(){
$(this).toggleClass("active");
$('.changeText').text($(this).data("text"));
});
If I am understanding the problem correctly, this would probably be your best bet
$('.btn').click(function(){
$(this).toggleClass("active");
if ($('.changeText').text() == $(this).data("text")) {
$('.changeText').text("This");
} else{
$('.changeText').text($(this).data("text"))
}
});
JSFiddle
Fiddle Demo
$('.btn').click(function () {
var $this = $(this);//cache selector
$this.addClass('active').siblings().removeClass('active');//addClass to current element clicked and remove class from siblings
$('.changeText').text($this.data("text"));
});
.siblings()
.addClass()
.removeClass()
Like this?
$('.btn').click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
$('.changeText').text($(this).data("text"));
});
http://jsfiddle.net/prollygeek/Azw4t/2/
$('.btn').click(function () {
if(!$(this).hasClass('active'))
{
$(this).addClass('active').siblings().removeClass('active');
$('.changeText').text($(this).data("text"));
}
else if($(this).hasClass('active'))
{
$(this).removeClass('active')
$('.changeText').text("This");
}
});
Related
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
Here's a fiddle :
http://fiddle.jshell.net/ggw6hqsj/1/
Here's my problem (for example) :
When the first button is clicked, the second is hidden.
But I don't know how to make reappear the hidden button when the first button is clicked once again.
Any idea ? Thanks.
$(document).ready(function(){
$('.button1').click(function(){
$('.button2').toggle();
});
});
http://fiddle.jshell.net/ggw6hqsj/3/
The easiest way in your code would be to change
$('.button2').hide();
to
$('.button2').toggle();
for button 1 and 2.
fiddle
Probably the simplest change to your existing code would just be to use .toggle() instead of .hide():
$('.button2').toggle();
You only need to show the clicked button and hide the other one.
try this
function activateButton(num){
var activeButton = ".button" + num;
var otherButton = ".button" + (num === "1" ? "2" : "1");
$(this).toggleClass('active');
$(activeButton).show();
$(otherButton).hide();
}
$(document).ready(function(){
$('.button1').click(activateButton("1"));
$('.button2').click(activateButton("2"));
});
I have 2 radio buttons. (yes & No)
On clicking Yes -- Next button should be active (.btn-primary) [COLOR SHOULD BE BLUE]
On clicking NO -- p tag should be visible and next button should be disabled (it should be there, but will be inactive)
I'm able to make tab visible..but not the btns
Link to JSfiddle
$('#radio1').change(function(){
if ($(this).is(':checked')) {
$('#notes-sp').addClass('hide');
}
});
$('#radio2').change(function(){
if ($(this).is(':checked')) {
$('#notes-sp').removeClass('hide');
$('#show-plan').addClass('btn-primary');
$('.right').attr('disabled','disabled');
}
});
When clicked on Yes Change the following in your code:
$('#radio1').change(function(){
if ($(this).is(':checked')) {
$('.radio').parent('div').find('#notes-sp').addClass('hide');
$('#myCarousel').find('.right').css('background-color','#006dcc');
$('#myCarousel').find('.right').addClass('btn-primary');
}
});
When clicked on No Change the following in your code:
$('#radio2').change(function(){
if ($(this).is(':checked')) {
$('#myCarousel').find('.right').css('background-color','#222222');
$('#myCarousel').find('.right').addClass('disabled');
$('.radio').parent('div').find('#notes-sp').removeClass('hide');
$('.radio').parents('div').find('#show-plan').addClass('btn-primary');
//$('.radio').parents('div').find('a[data-slide="next"]').addClass('btn-primary').removeClass('carousel-control:hover');
$('.radio').parents('div').find('a[data-slide="next"]').attr('disabled','disabled').removeClass('carousel-control:hover');
}
});
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");
}
});
I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.
It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});
You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/