i have two links and want to toggle its class when click on any link.
my links are
<a id="single" class="btn" >
<a id="double" class="btn active">
so i want to change class from btn to btn active
i have this code
$(document).ready(function(){
$('a.btn').click(function(){
$(this).removeClass('focus active');
$(this).removeClass('active');
$(this).toggleClass("btn active");
});
});
I tried with this code because in some other javascript in my accpliceation is also adding these classes.
this work fine when its like bellow
<a id="single" class="btn" >
<a id="double" class="btn active">
but when my first button is active like bellow
<a id="single" class="btn active" >
<a id="double" class="btn">
this did't work but give classes as bellow when click on double
<a id="single" class="btn active" >
<a id="double" class="active">
this is strange cause its working when <a id="double" is active but did't work when <a id="single" is active.
all i want to do is when click on any link,
1. remove all classes from old link and give old link class "btn"
2. remove all classes from clicked link and give class "btn active"
how to fix this?
You just need to toggle class for the current clicked link, and before that, remove active and focus class for all links, like this:
$('a.btn').click(function(){
$("a.btn").removeClass("active focus");
$(this).toggleClass("active");
});
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>
Basic toggling
The following code toggles the class active on your buttons, which means it adds it when it's not there and it removes it when it's there :
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("active");
});
});
Demo
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("active");
});
});
body {
margin: 0;
}
.btn {
border: 1px solid black;
padding: 10px;
margin: 10px;
display: inline-block;
background: #99f;
cursor: pointer;
}
.btn.active {
background: #00f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
Allow only one active button
If you want to have exactly one active button at all times, you should just remove the class active from ALL of your buttons and add it to the one clicked, which you could do like this :
$(document).ready(function(){
$('a.btn').click(function(){
$('.btn').removeClass("active");
$(this).addClass("active");
});
});
Demo
$(document).ready(function(){
$('a.btn').click(function(){
$('.btn').removeClass("active");
$(this).addClass("active");
});
});
body {
margin: 0;
}
.btn {
border: 1px solid black;
padding: 10px;
margin: 10px;
display: inline-block;
background: #99f;
cursor: pointer;
}
.btn.active {
background: #00f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
Your jQuery selector may be the problem.
You are detecting the click on all anchor tags with class "btn":
$('a.btn').click(function(){
But then you are removing class "btn". How can future clicks be detected? Answer: they won't.
Note that it is not necessary to specify both classes in the line
$(this).toggleClass("btn active");
It appears that you really only want to toggle the active class, so just do
$(this).toggleClass("active");
Also, I find it most useful to specify exactly what I want added/removed at any given time. In other words, I try only to use addClass() and removeClass(), rather than toggleClass(). It requires more code, but it is more safe.
Please change jquery code as follows :
$(document).ready(function(){
$('a.btn').click(function(){
$(this).toggleClass("btn btn active");
});
});
This works for me. hope this helps :)
$("a.btn").on("click", function() {
$(this).toggleClass("active");
$(this).siblings().toggleClass("active");
});
Please use the following code before your toggle script.
This will fix toggle class issue.
$("YourToggleSeletor").unbind('click');
Related
This is the page I'm working on: https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/
I want the buttons to stay in an active state until unclicked so that the user can clearly see what they have selected.
I have read and followed these instructions, to no avail: Keep button in active state until clicked upon again
NB: The 'button' used to be a toggle switch that I have turned off. Not sure if this is causing an issue.
I've added this JQuery to my theme:
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
As well as this CSS:
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<label class="bundled_product_optional_checkbox">
<input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
" Add for "
<span class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
</span>
</span>
::after
</label>
Appreciate any answers. Please be kind.
Just create your own class called active
<button class="Toggle Button">Toggle Button</button>
then create your own class active and style it in css
.active{
border: none;
background: teal;
color: white;
}
Now in jQuery toggle the active class on click
$('.toggle-button').click( function() {
$('.toggle-button').toggleClass('active');
});
Now you should have a working toggle switch
Here is the link to my code pen:
https://codepen.io/prabodhpanda/pen/pogNqpQ
answer updated..
if you are not using bootstrap then you can ignore those classes and CDN links : )
$('.bundled_product_optional_checkbox').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
.bundled_product_optional_checkbox.active {
background-color: #cfb87c !important;
border: 1px solid #cfb87c !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>
I have 4 different divs and 4 buttons, I'm trying to create a tabbed content using jQuery but I can't get it working right. So, I have used data-tab attribute.
jsfiddle.net
jQuery(document).ready(function() {
jQuery('#tabInteract .buttons a').click(function() {
var index = jQuery(this).index();
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
} else {
jQuery('#tabInteract .buttons a').removeClass('active');
jQuery(this).addClass('active')
jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
}
})
});
When I click on next button it doesnt close the previous div.
To achieve this behaviour you need to toggle the state of the active button, along with it's related tab, whilst hiding all the other tabs and removing the active class from the other buttons. Try this:
$('#tabInteract .buttons a').click(function() {
var $button = $(this).toggleClass('active');
$('#tabInteract .buttons a').not($button).removeClass('active');
var $tab = $('#' + $(this).data('tab')).toggle();
$('.closable_box').not($tab).hide();
})
a {
display: inline;
margin: 5px;
color: #000;
}
a.active {
color: red;
}
.closable_box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabInteract">
<div class="buttons">
<a data-tab="sports" href="#">Button A</a>
<a data-tab="cars" href="#">Button B</a>
<a data-tab="fruits" href="#">Button C</a>
<a data-tab="cats" href="#">Button D</a>
</div>
</div>
<div class="closable_box" id="sports">
Sports
</div>
<div class="closable_box" id="cars">
Cars
</div>
<div class="closable_box" id="fruits">
Fruits
</div>
<div class="closable_box" id="cats">
Cats
</div>
please help me for remove or hide my #id on url browser.
example:
my menu1 target on "#p1"
my site "mysite.com/index.htm"
when i click menu1 on my browser will like this "mysite.com/index.htm#p1"
i need my id not show on url browser just "mysite.com/index.htm" not like this "mysite.com/index.htm#p1"
#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}
ul{list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a{ display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: #111;
}
<div id="menu">
<input type="checkbox" id="tbl-menu"/>
<label for="tbl-menu"><img src="drop.png" height="40px" width="40px" alt=""></label>
<nav class="nav">
<ul class="tombol">
<li class="tombolmenu">
<a class="t1" href="#p1">Menu1</a></li>
<li><a class="t2" href="#p2">Menu2</a></li>
<li><a class="t3" href="#p3">Menu3</a></li>
<li><a class="t4" href="#p4">Menu4</a></li>
<li><a class="t5" href="#p5">Menu5</a></li>
<li><a class="t6" href="#p6">Menu6</a></li>
</ul>
</nav>
</div>
<!-- My page target -->
<div id="p1"> Page1 </div>
<div id="p2"> Page2 </div>
<div id="p3"> Page3 </div>
<div id="p4"> Page4 </div>
<div id="p5"> Page5 </div>
<div id="p6"> Page6 </div>
I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).
It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.
This code uses "vanilla" JS and should work with most web browsers.
//Get all the hyperlink elements
var links = document.getElementsByTagName("a");
//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
//Get the hyperlink target and if it refers to an id go inside condition
var elemAttr = elem.getAttribute("href");
if(elemAttr && elemAttr.includes("#")) {
//Replace the regular action with a scrolling to target on click
elem.addEventListener("click", function(ev) {
ev.preventDefault();
//Scroll to the target element using replace() and regex to find the href's target id
document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
});
}
});
Should this code not be correct, please feel free to point it out !
There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it.
Like this
$("a[href^='#']").click(function(e){
e.preventDefault();
var elem = $($(this).attr('href'));
/* check for broken link */
if(elem.length)
$(window).animate('scrollTop' , elem.offset().top)
})
In addition of hiding '#id' from url it'll also animate scrolling.
Hope It'll help.
I am designing my FAQs page for that i have used questions as links and answers in paragraph tags. I want to show answer of its respective question when its question link is clicked, i have coded till now and its working perfect.
My problem is that i have some answers where i have used links as well. so when i click such question link it shows its answer (Fine) but when i click the link in answer it hides the whole answer which i don't want. i want to open that link in new tab, and when i click question again it should hide that answer.
HTML
<div class="pageContents">
<div class="list_Q" id="Q3">
<a class="que" href="#">
<h5><strong>Q) </strong>
How can I test EPX before I buy it?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Demo link for EPX is <a target="_blank" href="http://google.com/" class="link_read">Here </a></p>
</div>
<div class="list_Q" id="Q15">
<a class="que" href="#">
<h5>
<strong>Q) </strong>How can I create Endicia account I'd?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Visit <a target="_blank" href="http://www.endicia.com/" class="link_read">Endicia</a> for
creating Endicia account.
</p>
</div>
</div>
CSS
#ans-pop {
display: none;
}
.list_Q {
BORDER-BOTTOM: #333333 1px dotted;
MARGIN-BOTTOM: 5px;
}
.list_Q H5 {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
MARGIN-BOTTOM: 0px;
BACKGROUND: #ededed;
COLOR: #d80d0d;
FONT-SIZE: 12px;
FONT-WEIGHT: normal;
PADDING-TOP: 5px;
}
.list_Q P {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
COLOR: #333333;
FONT-SIZE: 12px;
PADDING-TOP: 5px;
}
Jquery
$('.list_Q').click(function () {
var status = $(this).attr('id');
var fix = '#' + status + ' #ans-pop';
if ($(fix).is(":not(:visible)")) {
$(fix).show(500);
} else {
$(fix).hide(500);
}
return false;
});
fiddle
Just check if the target is not a tag like this:
if ($(event.target).is('a')) {
return;
}
http://jsfiddle.net/P45bE/129/
Update
In the below fiddle the code close the opened question while it show the clicked.
Hide the opened answer using $('.ans-pop:visible').hide(500);
Important I replaced the id="ans-pop" to class="ans-pop" because id attribute must be unique. Especially in this case.
http://jsfiddle.net/P45bE/132/
Add a class on your link and stop the event propagation on the click of your link.
<a target="_blank" class="test" href="http://www.endicia.com/" class="link_read">Endicia</a>
$('.test').click(function (e){
e.stopPropagation();
});
DEMO
I think you want this, try to replace your code with this
$('.list_Q a').click(function (){
var status = $(this).parent().attr('id');
Use e.stopPropagation(); in the anchors you want to click:
$("a[href!=#]").click(function (e) {
e.stopPropagation();
});
Demo
I would do it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<h5><strong>Q) </strong> Question number 1 </h5>
<div id="answer_1" class="answer">
<p><strong>A)</strong> Answer, with an <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
<div class="faq">
<h5><strong>Q) </strong>Here's another question</h5>
<div id="answer_2" class="answer">
<p><strong>A)</strong> Another answer, with another <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
$('.question').on('click', function(){
var href = $(this).attr('href');
$(href).toggle();
return false;
});
.answer {
display:none;
}
Seeing as you're using links, I've added the ID of the answer as the href so the questions and answers are linked, even without the JS.
In jQuery, the href is then grabbed from the link and used to select and show/hide the answer div
External links work as they normally would, as the jQuery code doesn't affect them in any way
Is it possible to change a link to "active" without add/removing a class? The problem i´ve got is, that my other script will not work if the "a"-tag will be changed for example to "a.active".
So this way works for the link, but not for my other script ;(, because a class will be add and remove.
<script>
$(function(){
$('.mydiv a').click(function(){
$('.mydiv .active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Can anybody help me?
UPDATE 2
Thats the script I work with:
http://jsfiddle.net/7n2d4b44/2/
Use data-* attributes to hold data, don't use class names as data. You can use the jQuery .data method to get the value of a data-* attribute.
var sliding = $('.sliding_div');
var divWords = $('.sliding_div p');
$('.links a').click(function () {
//pass .data the name after the `data-` part in the attribute name
var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector
divWords.hide().filter(c).show(); // hide all words,
// filter to get the ones with class like the clicked link
// show the filtered ones
//You could move this to its own handler
//$(".links a.close).click(...)
c === '.close' ? sliding.hide() : sliding.show();
// if c is .close show the sliding_div else hide it
$(".links .active").removeClass("active");
$(this).addClass("active");
});
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
display:none;
}
.sliding_div div {
display:none;
}
.active{
color:#F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
<a href="#" data-filter='one'>Link 1</a>
<a href="#" data-filter='two'>Link 2</a>
<a href="#" data-filter='three'>Link 3</a>
<a href="#" data-filter='close'>Close</a>
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
You could use the CSS pseudo-class I think like:
a:active { color: lime }
More info CSS :active pseudo-class
The $(this).addClass('active'); should append so the element should have 2 classes. The other class should not be removed. You can double check.
In your case, it could be that your function to access the other class is not coded correctly
I made a few changes, but you should now be able to add your code to use the active class, without worrying about this bit...
css
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
}
.sliding_div p {
display:none;
}
html
<div class="links">
<a href="#" data-link='one'>Link 1</a>
<a href="#" data-link='two'>Link 2</a>
<a href="#" data-link='three'>Link 3</a>
Close
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
Javascript
var sliding = $(".sliding_div");
var divWords = $(".sliding_div p");
$(".links a").click(function (e) {
e.preventDefault();
divWords.hide();
sliding.find("." + $(this).data("link")).show();
});
jsfiddle example...
http://jsfiddle.net/7n2d4b44/7/