We Keep Coding

jQuery onclick show first parent div

I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much

Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/

First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO

Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)

On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)

My javascript hides all the divs.

So, Here is my little barter calculator.
The problem is that when I try to add it to my site it goes all nuts by hiding all the divs. (It literally applies display:none to all of them).
How can I make this work?
Additionaly, I would like to make the script calculate value after pressing Submit button, not dynamically like now. Any easy way to do it?
It goes like this(sample, for full code go to jsfiddle, link at the bottom):
<div id="Apple">
<ul>
<li><span data-val="2"></span> bananas</li>
<li><span data-val="3"></span> oranges</li>
</ul>
</div>
And this is my JS
$(document).ready(function () {
function showTab(name) {
$('div').hide();
var $div = $('#' + name).show();
var number = parseInt($('.number').val(), 0);
$('span', $div).each(function() {
$(this).text($(this).data('val') * number);
});
}
$('#dropdown').change(function () {
showTab($(this).val());
});
showTab($('#dropdown').val());
});
Fiddle - check it live

Analyse the code carefully. The showTab() function hides all divs on your site:
$('div').hide();
And then it shows the one which matches your tab:
var $div = $('#' + name).show();
You'll need to change the first selector to something a little more specific to your own markup, otherwise it will continue to hide other <div> elements. Unfortunately, it's not clear what structure you're using based on the Fiddle, so I can't help more.
I'd recommend adding a class to the numerous sections, and then updating your code. For the #Apple example:
<div id="Apple" class="tab">
In turn, you can then use the selector:
$('div.tab').hide();
It might be better to also use jQuery's not() function, to create some exclusivity as follows:
$('div.tab').not('#'+name).hide();
This will also eliminate the need to later call show().

$('div').hide(); will hide every div on the page. Be more specific:
$('div.fruit').hide();
<div id="Apple" class="fruit">
<ul>
<li><span data-val="2"></span> bananas</li>
<li><span data-val="3"></span> oranges</li>
</ul>
</div>
Demo

you have $('div').hide(); - no wonder all divs are hidden, maybe you should narrow it down with some $('#container div').hide(); ?

Try to change your selector
$('div').hide();
to
$('#Apple').hide();

Disable all links in parent block but not in one of its child block

I have a div having class say wrapper. Structure of html looks something like this.
<div class="wrapper">
<div class="header">
LOGO
</div>
<div class="nav">
<!-- Anchors -->
</div>
<div class="container">
<!-- Other contents anchors etc. -->
</div>
</div>
Is there any way we can disable all the links inside wrapper except anchors in div having class "nav"? What could be the efficient way to do this?
I am using the following code to disable all links -
$('.wrapper').find('a').die('click');
$('.wrapper').find('a').unbind('click');
$('.wrapper').find('a').removeAttr('onclick');
$('.wrapper').find('a[href^="javascript"]').removeAttr('href');
Can we do it without making a check using loop? Or, it would affect the same , using loops and without using loops?

Base one the HarryFink's answer use something like this
(closest function is more more effective than parents)
$('.wrapper').on('click', 'a', function(e){
if(!$(this).closest('.nav')){
e.preventDefault();
}
})

Try
$('.wrapper').find('a').not($('.wrapper').find('.nav a')).on('click', function(e){
e.preventDefault();
})

Try something like this:
$('.wrapper').on('click', function(e){
var $target = $(e.target);
if(!$target.parents('.nav')){
e.preventDefault();
}
})

You can use the following to target all anchors, which are descendants of wrapper, contained within another div, which doesn't have the class nav:
$('.wrapper div:not(".nav") a')

Try this,
$('.wrapper div:not(".nav") a').removeAttr('href');
Working fiddle

Have a look here: http://jsfiddle.net/jSEnu/1/
CODE
$(".wrapper div:not('.nav') a").prop("href", "#");

Select them like this
$('div.wrapper > div:not(".nav") a')
A sample (not the same, just similar): http://jsfiddle.net/balintbako/rGwtw/

How to replace a <ul> inside a div by its div id?

How do you replace a <ul> inside a div by using the div's id in jQuery,
<div id="example">
<ul>
Content To Be Replaced...........
<ul>
</div>

$("#example ul").text('Content to replace');
You can select the div with the ID selector #. A space is used as an descendant selector, and .text changes the text content. You could also use .html to replace HTML content.

Simply do:
$("#example ul").html('New Content');

I presume you mean something like this?
$('#example ul').html('new content');

Absolutely no jQuery is needed:
var div = document.getElementById("example");
div.firstChild.nextSibling.textContent="bla";​ //div
// textnode -> ul -> text
This can be compacted to:
document.getElementById("example").firstChild.nextSibling.textContent="bla";​
// div --> textnode --> ul --> text
Yes, it is more code than jQuery, but it's also a lot faster..
You could even use:
document.querySelector('#example ul').textContent="bla";
Still 4-5 times as fast as jQuery, but using very similar, semantic syntax. No need to drop native JS because it's "hard" or anything.

jQuery CSS Selector combined with "this"

I'm trying to figure out if something like this would be possible. We are given that HTML structure
<a href='#' class='anyLink'>
<!-- here goes some content-->
<div class='childElement'><!-- here goes some content--></div>
</a>
I am not able to use ID's because there are many links and it's not defined how many more are to come. So my question is, do you guys know a way where I can do something like this :
$('a').on("click",function(e){
$(this +"div").val(); // for example.
});
I want to select a children element of that anchor that has been clicked or want to get the value of the children element. I also don't have any ID's of the children elements and I am trying to select things via CSS Selectors as td:nth-child(4).
Could anybody tell me if this is possible ?

try
$('a').on("click",function(e){
$("div",this).text(); // for example.
});

$('a').on("click",function(e){
$(this).children("div").eq(0).html();
});

You are looking for a function called .children().
But you can also try something like this:
$('a').on('click', function( e ) {
$('div', this).val(); // Each div child of this element
$(this).children('div'); // Each div child of this element
});