I want to toggle between two classes on two anchor tags. When I click on the non-bold link, I want it to go bold, and then the other go to normal. However I don't really know how to go about it.
I've tried a few approaches:
$(".link").click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2<a>
</div>
Here, I add and remove based on the target and check if that class is present but it doesn't handle the other non-clicked anchor - I need to click that to remove the bolding when it needs to happen automatically.
I then mess around toggleClass():
$(".link").click(function(e) {
$(this).toggleClass("selected");
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
Which is definitely a step closer but I don't understand how to establish a relationship with toggleClass() and more than one element.
Am I going about this the right way or is there something better?
How about this. You can use siblings() method.
$(".link").click(function(e) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
});
.selected {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="two-links">
<span>Filter By:</span>
<a class="link selected" href="#">Link1</a>
<a class="link" href="#">Link2</a>
</div>
The accepted answer is the right one, but something that should be added:
$(".link").click(function(e) {
var isSelected = $(this).hasClass("selected");
e.preventDefault();
if (!isSelected) {
$(this).toggleClass("selected");
$(this).siblings('a').toggleClass('selected');
}
});
Essentially, only perform the toggle action if what you're clicking on is NOT the selected element.
A simpler solution
$(".link").click(function(e) {
e.preventDefault();
$(".link").removeClass("selected");
$(this).addClass("selected");
});
Remove selected class from all .link then add it to the clicked element. This will work for more than 2 links and it is simpler. There is no need to check for selected class or get siblings.
Related
I am trying to hide one element and show the other when when button is clicked and switch around when it is clicked again.
I came up with something like this but this isn't going to work...
jQuery("#wcvat-toggle").click(function() {
jQuery("#excltaxout").show();
jQuery("#incltaxout").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
However this will always show the #excltaxout. Any suggestions?
To make this work - and assuming that one of those elements starts hidden - you can simply call toggle() on them both at the same time. This will invert their display states.
jQuery(function($) {
$("#wcvat-toggle").click(function() {
$("#excltaxout, #incltaxout").toggle();
});
});
#excltaxout { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
You can use jQuery's .toggle():
Display or hide the matched elements.
$("#wcvat-toggle").click(() => {
$("#incltaxout").toggle();
$("#excltaxout").toggle();
});
#incltaxout {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="wcvat-toggle">
<span id="incltaxout">Including Tax</span>
<span id="excltaxout">Excluding Tax</span>
</a>
Note however that this only works if one element is hidden by default, if not you will hide/show both at once.
I have 4 divs like this, with class work:
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
And I want to toggle clicked class to clicked div:
.clicked {
font-size: 25px;
}
How to do it?
$('.work').on('click', function() {
$(this).toggleClass('clicked');
})
Geez, why couldn't you just go check the documentation!
There is a function in jquery named toggleClass.
You should attach a click event to your div and then use this to reference to the clicked element.
$('.work').click(function() { // edited: from $(.work) to $('.work')
$(this).toggleClass("click")
})
Here you go with a solution https://jsfiddle.net/7ep3e4gn/
$('div.work').click(function(){
$(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});
.clicked {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda2</h3>
<p>Panda2 eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda3</h3>
<p>Panda3 eats apple.</p>
</div>
I've used addClass & removeClass along with jQuery siblings method.
Hope this will help you.
Jquery has a method just for that.
$('.work').click(function(e) {
$(e.target).closest('.work').toggleClass('clicked');
});
The .closest() is in case the click was registered on the contained image, etc.
If you want only one of the div's with the class .work to have the .clicked class at a time, here's what you do:
$('.work').on('click', function() { //When the div 'work' is clicked
$('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'
$(this).addClass('clicked'); //Add the class 'clicked' to the div that was clicked.
});
Here's a fiddle for the same.
I've this code
$('a').click(function() {
$('a span').first().addClass('hide');
$('a span:nth-child(2)').removeClass('hide');
$('a span:nth-child(2)').addClass('display');
});
.hide {
display:none;
}
.display {
display:block;
}
<a href="#">
<span>Hello</span>
<br>
<span class="hide">World</span>
</a>
When I click on the link I want the first span hide and the 2nd span appears.
I want to do it multiple times (click on this link multiples times and have the same result).
I try to do it with this Jquery code
I would just toggle the classes
and you have to prevent the default on the link so it doesn't try to leave the page.
$('a').click(function(e) {
e.preventDefault();
$('a span').toggleClass('hide show');
});
here is a work demo
I would do something like this. Loop through the children of the a and swap their classes. Doing this method allows you to do other things as well as just toggle the class like adding text/css attributes to the span's.
$('a').click(function() {
$(this).children().each(function(index, element)
{
if ($(this).hasClass('hide'))
{
$(this).removeClass('hide');
$(this).addClass('display');
}
else
{
$(this).removeClass('display');
$(this).addClass('hide');
}
});
});
Here is a JS Fiddle of the code above
This should do what you are looking for:
HTML:
<a class='hide-clicker' href="#">
<span>Hello</span>
<span class="hide">World</span>
</a>
jquery:
$("a.hide-clicker").click(function(e) {
e.preventDefault();
$(this).find('span').toggleClass('hide');
});
CSS:
.hide {
display:none;
}
I have a group of divs that are being populated dynamically that highlight photos and names of individuals, about a hundred in all:
HTML:
<div class="profile-pic-wrap">
<div class="profile-pic">
<div class="profile-btn-bg">
<a href="#linktoBio">
<img class="instructor" src="bioPic.jpg" border="0">
</a>
</div>
</div>
Name of Guy
</div>
CSS:
.profile-btn-bg a, a.instructor-name{
background: none;
}
.profile-btn-bg a.hovered, a.instructor-name.hovered, .profile-btn-bg a:hover, a.instructor-name:hover{
background: #ff0000;
}
I'm looking to write a bit og jQuery that when you hover over the LINK holding the IMAGE, that the style of that link AND the link holding the NAME both change, and vice-versa.
I have this:
$(document).ready(function(){
$(".profile-btn-bg a").hover(function(){
$("a.instructor-name").toggleClass("hovered");
});
$("a.instructor-name").hover(function(){
$(".profile-btn-bg a").toggleClass("hovered");
});
});
but that changes ALL of them, and not just the group I am hovering over. Any ideas?
You can handle the default parameter passed to your hover callbacks (Event eventObject), for example:
$(document).ready(function(){
$(".profile-btn-bg a").hover(function(event){
event.target.toggleClass("hovered");
});
$("a.instructor-name").hover(function(event){
event.target.toggleClass("hovered");
});
});
you need to limit the search inside the closest .profile-pic-wrap element
$(document).ready(function(){
$(".profile-btn-bg a").hover(function(){
$(this).closest('.profile-pic-wrap').find("a.instructor-name").toggleClass("hovered");
});
$("a.instructor-name").hover(function(){
$(this).closest('.profile-pic-wrap').find(".profile-btn-bg a").toggleClass("hovered");
});
});
Given a group of elements with no target attribute (e.g. following code), what is the most effiecient way to set a highlight-styling for a selected element while unsetting the same styling for a previously selected element ?
<div id="uno" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="dos" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
<div id="tres" class="element_parent">
<a href="#" class="element">ONE</div>
</div>
I would add and remove a class on clicking the anchor, like so:
$('.element').on('click', function(e) {
e.preventDefault();
$(this).addClass('active')
.closest('div')
.siblings('div')
.find('a')
.removeClass('active')
});
CSS
.active {color: red;} /* or whatever */
or:
$('.element').on('click', function(e) {
e.preventDefault();
$('.element.active').removeClass('active');
$(this).addClass('active');
});
Something like:
$(".element").click(function() {
$(".element").removeClass("active");
$(this).addClass("active");
});
$('.element').on('click',function(e){
$(this).addClass('active');
$('.element').not($(this)).removeClass('active');
});