Fade Out And fade in Div with specific class and id - javascript

I am facing a little issue with some jquery code. I have some divs (look bellow)
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>
I am trying when user clicks in each div with class add to fadeout the specific div and fade in the next div with class added.
Check my Code:
<script type="text/javascript">
$(document).ready(function($){
$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
});
</script>

ID's must be unique and it should not be a number. You have to set different ids for your divs. Additionally you have to hide the div with class .added initially to achieve your need.
Because fadeIn wont work on elements which are already visible.
Try,
<script type="text/javascript">
$(document).ready(function($){
$('.added').hide();
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeIn("slow");
});
});
</script>
DEMO

You need to use $(this) to hide current element and use next to hide .added, also use unique ids to make your html valid.
The next element is already visible you probably need fadeOut() to hide it.
Live Demo
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeOut("slow");
});

You can't have same id on multiple elements. Instead use a class
$('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });

Couple of points:
Ids should be unique. In case, you need same selector on group of elements, use class.
this reference contains the target on which event listener is added, So your this context contains the element with add class. jquery.find() tries to match the selector on the children. That's why your code is not working.
Just try this Jsbin Demo
HTML
<div class="wrapper">
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
</div>
JS
$('.wrapper').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
Idea: Bind event listener on parent.

Related

What is the correct way to select an element with a specific a class using jQuery [duplicate]

This question already has answers here:
How to get top most div parent class
(7 answers)
Closed 4 years ago.
I'm trying to use jQuery to select a div element but, for the life of me I can't figure out how to get it to work. I'm trying to set it up so when the user clicks on the span element with the class remove it finds the closest div element with the class class-i-want-to-select
This block of code is dynamically added after the page has finished loading:
<div class="container">
<div>
<span style="float:left;">some text</span>
<span class="remove" style="float:right;">[X]</span> ///user clicks here
</div>
<div style="clear:both;"></div>
<div class="class-i-want-to-select"></div> ///want to select this element
</div>
This is the code i tried to use:
$('body').on('click', '.remove', function () {
var that = $(this).closest('div').find('.class-i-want-to-select');
console.log(that);
});
I figured the code above would properly select the element I'm trying the select but it's not working. Am I doing something wrong? Since the code block I'm traversing is dynamically added, is there a different way I need to select it?
Try this: you are trying to get closest div and then finding class which will not give you the parent div having class class-i...
You need to put class selector .container in closest only and it will return the correct parent div, then call find on it to get class-i-want-to-select. check below code
$(document).on('click', '.remove', function () {
var $parent = $(this).closest('div.container');
var that = $parent.find('div.class-i-want-to-select');
console.log(that);
});
Your span is wrapped in a div as well. So closest will find that div instead of the div with the class container. And that div does not have a child of class-i-want-to-select. So try using .closest( '.container' ).
Try this-
$('.remove').on('click', function () {
var that = $(this).parent().parent().find('.class-i-want-to-select');
console.log(that);
});
Another way is to use parents() instead with one of the container divs as its selector:
$('body').on('click', '.remove', function () {
var that = $(this).parents('.container').find('.class-i-want-to-select');
console.log(that.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<span style="float:left;">some text</span>
<span class="remove" style="float:right;">[X]</span> ///user clicks here
</div>
<div style="clear:both;"></div>
<div class="class-i-want-to-select">I am the one you want!</div> ///want to select this element
</div>

jQuery show/hide on click in Wordpress

I have three buttons that change color when you hover (sprites) and I want to use those buttons so that when they are clicked on, different content will display.
I've gone through multiple tutorials / boards and nothing seems to work.
The buttons are displayed as follows:
<div id="buttons">
</div>
The divs where the content was placed (my last attempt) were as follows:
<div id="pages">
<div id="div1"><img src="..."></></div>
<div id="div2"><img src="..."></></div>
<div id="div3"><img src="..."></></div>
jQuery----
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attribute("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>​​​​
My anchors seem to be wrong. With this setup it just went to the top of the page. When using the anchor #1, #2, or #3 it would go to the div location but it would not hide or show the content. Frustrating.
The sprites are working fine. Now I'm trying to figure out how to make them clickable so that different content will display when each button is clicked (3 divs - under a parent div?). If anyone knows exactly how to do this I will be so thankful.
The content is largely images, and I am using Jupiter theme with a front-end editor so I don't know if it could be something with that. But nothing seems to be broken on the backend.
Also, if you can point me to a tutorial that will teach me how to make it so they animate in and out when clicked, that would be legit. Thanks again.
Check out my fiddle.
The code you posted had two main problems, confusing jQuery's data attributes with Javascript id's, and confusing the CSS selectors for classes (.) and ids (#). Here is the corrected html and javascript:
HTML
<div id="buttons">
Des
Brnd
Strt
</div>
<div id="pages">
<div id="div1"><p>This is 1</p></div>
<div id="div2"><p>This is 2</p></div>
<div id="div3"><p>This is 3</p></div>
</div>
Javascript
$("#pages div").hide();
$("a").click(function() {
var id = $(this).data("id");
$("#pages div").hide();
$("#div" + id).show();
});
you can Simple Use hide and show
Here Your Id for the button is Buttons
$("#ElementId" or ".Class").onClick(function(){
$("#OtherElement" or ".OtherElement").show()/hide()
});
You can Use .Toggle() to switch between states
so
$("#Buttons").click(function(){
$(".brnd").hide();
$(".des").show();
$(".Start").hide();
});
You can Also Use $("#Buttons").onclick(function(){ Instead of click depends on Your jquery version
See the Link May be you want this
Try this:
check tutorial here http://api.jquery.com/show/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#f,#s,#t").hide();
$(".des").click(function(){
$("#f").toggle();
});
$(".brnd").click(function(){
$("#s").toggle();
});
$(".strt").click(function(){
$("#t").toggle();
});
});
</script>
http://jsfiddle.net/9SabV/
i have updated my answer as you updated your html,script code.
check this also
Use # for id and . for class.
http://jsfiddle.net/mdgd7/
There is only one issue I found in your code ie
$(".div" + id).show();
here instead of "."(dot), you have to use "#".
You have to replace it with this:-
$("#div" + id).show();
because you are using "id" in "div", not "class".
UPDATE
You have have to remove this:
$("#pages div").hide();
instead you have add this to css file:-
#pages div{display:none;}
Here is the updated js script:-
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("id"); // Using a custom attribute.
//$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them
$("#div" + id).fadeIn(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
There are certain issues in you code. First of all you have not added data-id attribute to the anchor tags and tried referring them in you js code. The html5 "data-" attribute is used to store custom data inside the tag.The logic behind this is that any attribute with a "data- prefix" will not be processed and will be rendered as a data element.
Then the closures that you have added after the image tag are not necessary and syntactically wrong and is an error.
Here in your case, we can simply handle it with the "id" as there is not much need to use the data-attribute.
The simplified code will be like,
HTML
<div id="buttons">
ONE
TWO
THREE
</div>
<div id="pages">
<div id="div1">IMG 1</div>
<div id="div2">IMG 2</div>
<div id="div3">IMG 3</div>
</div>
JS
$("a").click(function() {
var id = $(this).attr("id"); //retrieving the id
$("#pages div").hide(); // hiding all elements
$("#div" + id).fadeIn(500); // showing the required one only
});
CSS
#pages div{
display:none;
}
Animations : I have added fadein animation. For simple fade in, fade out effects you can use jquery short hand animations like .slideDown() .fadeIn(), .animate(). There are more options available here : http://api.jquery.com/animate/
However you can add more customized animations using CSS3 animations which are more browser friendly. The criteria to choose is that, if you need more control over the animations and event tracking you can go for jQuery animations and otherwise CSS3 animations works like a charm.

How can I remove (.remove) all elements (div) but not this (this) element (div) in jquery?

I have a set of divs listening for a click. When one is clicked I need to remove all the others.
HTML:
<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>
<div class="foo">D</div>
If I click div (A), how can I remove all the rest (B,C,D) but keep A?
I tried this, but it didn't work:
$('.foo:not(this)').remove();
$('.foo').not(this).remove(); //w00t
So to put it all together:
$('.foo').click(function(){
//code...
$('.foo').not(this).remove(); //w00t
//more code....
});
IF you are trying to remove all the siblings of a set of elements, you can do this.
$(".foo").click(function (e) {
$(this).siblings().remove();
});

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>
It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.
Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Check out the jQuery selectors and why not just use $(this)?
$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});
Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.

jquery toggling a div - how to do this with multiple ids?

I am new to Jquery. My setup is as follows:
I have a series of divs that need to be able to be toggled (display hidden and shown). Each div has an action that can be performed so a unique ID will be necessary to know from which div the event came from.
To toggle the div I have a button for each div (which is not located within the div to be toggled).
Right now without jquery, I use the button's onclick event to pass the ID of the corresponding div to be toggled. Using the unique ID I can do the following:
function toggleFlag(divId) {
var div = document.getElementById(divId);
div.style.display = (div.style.display=="block" ? "none" : "block");
}
divId is unique so I also know where the event comes from if action within the div is performed.
the anchor code looks something like this:
onclick="toggleFlag('id-111');"
where the '111' is the unique id
First off, is it even worth it to use jquery for this if the extent of my javascsript isn't much more complicated (aside from maybe simple ajax).
More importantly, how would this properly be done using jquery?
Update: I am very close to solving this. I managed to get it to work using one of the suggestions below requiring unique class names for each button. A couple of the methods suggest implementations where the class name is the same for all buttons (I want this in order to be able to statically assign styles to the button class), but I could not get these to work. Could somebody please elaborate on the solution? Thanks!
Let's say that you build your anchors to have an id that corresponds with the id of the DIV to toggle and further that they all have a common CSS class. For example,
Toggle
<div id="d_111">Some stuff.</div>
Now you could use jQuery to build the click handlers for all of these pretty easily.
$(function() {
$('a.toggleButton').click( function() {
var divId = $(this).attr('id').replace(/a_/,'d_');
$(divId).toggle();
});
});
You could do something like this:
HTML:
<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("class");
$("#" + divId).toggle();
});
});
This approach has the advantage of only defining the event once for all buttons. You could also use another strategy for storing the div id in the button information, like a non-standard attribute - which jquery can pick up as well, or make the div id a part of the button id like so:
<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>
and then extract the id of the div from the id of the button clicked (personally this is the approach I'd take)
Hope this helps
EDIT: To answer the first question, yes you would benefit from doing this with jQuery since it would shorten the amount of code that you are writing and it would allow you to move to unobtrusively assigning events to the buttons which is a good thing :)
EDIT 2: Using non-standard attributes:
HTML:
<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("divid");
$("#" + divId).toggle();
});
});

Categories

Resources