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;
}
Related
I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?
When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");
Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle
Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});
You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle
Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/
According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle
I have problem with addClass and removeCLass in JS. I would like to do sth like that:
But I have a content div where I load files in PHP. But when I load sth the script resets and first li is selected. Scheme:
I click on Events, it gets new class and the content is load. Now when I click events, page loads and I see the content but class in first li.
How to change it?
EDIT:
OK guys I change code but it still doesn't work as I want. When I chenge "#" in links to url, the page loads as new and I lost this JS. (It starts again).
CODE:
$(document).ready(function () {
$("#MB1").click(function () {
$(this).addClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB2").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB3").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB3").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB4").removeClass("active");
});
});
$(document).ready(function () {
$("#MB4").click(function () {
$(this).addClass("active");
$("#MB1").removeClass("active");
$("#MB2").removeClass("active");
$("#MB3").removeClass("active");
});
});
#menu-div ul{
list-style-type:none;
}
.button a{
text-decoration: none;
color:green;
}
.button a:hover{
color: red;
}
.button.active a{
text-decoration: underline;
}
<div id="menu-div">
<ul>
<li id="MB1" class="button active">Home</li>
<li id="MB2" class="button">Projects</li>
<li id="MB3" class="button">About Us</li>
<li id="MB4" class="button">Contact</li>
</ul>
</div>
What happens when you assign the click action using
$('#menu li a').on('click', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
is that only the existing objects receive the event-handler.
You want to use something like this instead:
$("body").on('click', '#menu li a', function(){
$('li a.current').removeClass('current');
$(this).addClass('current');
});
By making body the target, even if the data loads after the script, the event-handler will be set.
In addition, any subsequent changes to the menu won't require you to reset the event handler.
EDIT
Per the changes to your example code:
When you have <a href="#" and so on, pressing the link does not make you leave the page.
You changed some of the links to <a href="?something" and so on. Clicking this link, the whole page is reloaded with the new querystring.
Are the links supposed to get data asynchronously?
If YES, you should return the jquery to the way it was... and use my answer above instead of the one you used of $(document).ready({[...].
If NO, I would suggest that you use PHP to make sure that the correct menu item is set to active.
Something along the lines of (I don't actually know php... this code may be completely off):
<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?>
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>
I'm trying to add this the active class to the element when the user clicks it. Why does it not work? Is there something wrong with the syntax?
HTML code:
<div class="accordion">
<h3>a</h3>
<p class="active">b</p>
<h3>a</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
<h3>b</h3>
<p>b</p>
</div>
jQuery code:
jQuery(function($) {
$('div.accordion').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
What i wanna do is when the user clicks h3, thats when it sets the p tag below it the active class
You need to bind click event to H3 elements. Also make sure you remove previously active elements:
var $h3 = $('.accordion > h3').click(function(e) {
e.preventDefault();
$h3.next('p').removeClass('active');
$(this).next('p').addClass('active');
});
Demo: http://jsfiddle.net/2DB37/
I'm trying to add the active class to the p tag.
You forgot to add a click event to the p tag:
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next('p').addClass("active");
});
});
WORKING DEMO
change jQuery to like this
jQuery(function($) {
$('div.accordion p').click(function(e) {
e.preventDefault();
$(this).addClass("active");
});
});
UPDATED DEMO
jQuery(function($) {
$('div.accordion h3').click(function(e) {
e.preventDefault();
$(this).next().addClass("active");
});
});
http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>
I want to create a slider with jquery animate and I can't think of how to rotate and animate the next elements here is my HTML
<div id="slider">
<a href="http://somthing/" target="_blank">
<img src="http://something/logosponso.jpg" title="Another" />
</a>
<a href="http://somthing2/" target="_blank">
<img src="http://something/logosponso2.jpg" title="Another" />
</a>
…
…
I have the first a tag hidden in the css
#slider a{
display: none;
}
What I want to happen is after 4 seconds of delay I fading in or slide in with some animation the next a tag and hiding the current. I want to do this until I get to the last a tag then I want to circle back around to the first a tag
I have this so far and not sure if I am heading in the right direction…any ideas?
$("#slider a").fadeIn(500).delay(3000)
$("#slider a:first").show();
$('#slider a').click(function(e) {
e.preventDefault();
$(this).hide();
if ($(this).is('#slider a:last')) {
$('#slider a:first').fadeIn(500);
} else {
$(this).next().fadeIn(500);
}
});
I actually not understand what you need. However, if you want to show on page $(document).ready(..., you can try code bellow and modify as you need:
$(document).ready(function() {
$('#slider a').each(function() {
if ($(this).is('#slider a:first')) {
$(this).fadeIn(500);
} else {
if ($(this).prev().not(':hidden')) {
$(this).fadeIn(500);
}
}
});
});