We Keep Coding

jquery add and remove class not working

I have one problem about add and remove class in my javascript code.
I have created this DEMO from codepen.io
So you can see in demo there is a Click here link. When you click the link then jquery doing
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
$('.vduzalani').animate({'opacity':'.50'}, 300, 'linear');
$('.vduzalani').css('display', 'block');
$(this).next('.yazi-paylas').toggleClass('in');
})
});
Then problem is i want to add a .in from .yazi-paylas div tag. What is the problem in my javascript code

That is because .buton is the only child node of its parent and .next() will return nothing, as seen in your markup:
<div class="container">
<div class="buton">Click Here</div>
<!-- .buton is the ony sibling! -->
</div>
<div class="yazi-paylas">ssss</div>
<div class="vduzalani"></div>
You can use .parent('.container') (or just .parent()) or .closest('.container') to go one level up, and select the immediate sibling of .container:
$(document).ready(function() {
$('.buton').click(function (event) {
event.preventDefault();
// You can use chaining, so you don't have to fetch $('.vduzalani') twice
$('.vduzalani')
.animate({'opacity':'.50'}, 300, 'linear')
.css('display', 'block');
// Tranverse DOM
$(this).parent().next('.yazi-paylas').toggleClass('in');
// or
// $(this).closest('.container').next('.yazi-paylas').toggleClass('in');
});
});
See demo fiddle here: http://jsfiddle.net/teddyrised/0g9385k1/

Please try:
$('.yazi-paylas').toggleClass('in');
instead of
$(this).next('.yazi-paylas').toggleClass('in');

Evaluate the parent to get the .yazi-paylas element. Change your code to:
$(this).parent().next('.yazi-paylas').toggleClass('in');
Or, if it doesnt matter the parent, just do:
$('.yazi-paylas').toggleClass('in');

Try to replace your line with this:
$(this).parent().next('.yazi-paylas').toggleClass('in');
$(this) in this case is actually one level deeper than the element you are trying to select.

Click Function Conflict in jQuery

I am trying to add a handler for the click function to redirect to some link. I have a parent div which has a click handler to redirect to google.com and inside the parent div, I have a subdiv with an anchor tag pointing to yahoo.com. If I click the sub div containing the link to yahoo.com, it currently goes to google.com. How do I overcome this problem?
I have created a JSFIDDLE. Here is the HTML code:
<div class="maindiv">
<div class="subdiv">
Click Me
</div>
</div>
and the Javascript code:
jQuery('.maindiv').click(function() {
window.open('http://google.com');
});
I want that clicking the parent div should take the user to google.com but any link inside the parent div should take the user to the appropriate link.
Thanks!

Here is the updated code: http://jsfiddle.net/c2XJf/23/
Specifically, you need to stop propagation of the click event on the anchor tag like this:
$('.subdiv a').click(function(event){
event.stopPropagation();
});
and if you want to open the link of the anchor tag in a new tab/window, add a target attribute to your HTML like this:
Click Me

Jquery Code:
$('.subdiv a').click(function(event){
event.stopPropagation();
window.open('http://yahoo.com');
});
$('.subdiv').click(function(event){
window.open('http://yahoo.com');
});
$('.maindiv').click(function(event){
window.open('http://google.com');
});
and you can set width style for subdiv to show redirects perfectly.
Updated code is:
http://jsfiddle.net/c2XJf/22/

check if target div is the current div..
try this
jQuery('.maindiv').click(function(e) {
if(e.target == this){
window.open('http://google.com');
}
});

$('a').click(function(){window.open('http://yahoo.com');});

Html Code:
<div class="maindiv">
<div class="subdiv">
Click Me
</div>
</div>
Jquery Code:
jQuery('.maindiv').click(function() {
window.open('http://google.com');
});
jQuery('.maindiv').find('a').click(function() {
window.open('http://yahoo.com');
});

You can solve this problem simply checking the tagName of the clicked element and redirecting to the corresponding page.
jQuery('.maindiv').click(function(event) {
var target = $(event.target);
//checks if a tag has been clicked or not
if(!target.is('a')){
window.open('http://google.com');
}
else{
window.open("http://yahoo.com");
}
});
Demo

jQuery function to only run on the element clicked

I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>

Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle

There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});

Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});

How can I make entire DIV clickable AND open child links in separate DIV?

I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.

This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.

I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps

JQuery advice needed

I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul

try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.

Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.

In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/

You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>