We Keep Coding

Use jQuery .click() function with an individual element

I want to show the list of tags on an Tumblr blog only when the user clicks on the tags button. For that I use this HTML and jQuery.
HTML
<span class="tags-link">Tags</span>
<ul class="tags">
<li> {Tag} </li>
</ul>
jQuery
$(document).ready(function(){
$(".tags-link").click(function() {
$(".tags").slideDown(700, function(){
//end animation
});
});
});
Every time I click on the .tags-link every .tagsshows up on the page, and I only want the ones of the post where the user has clicked to be shown. I recently started learning jQuery and I'm a little lost here...

You can use .next() http://api.jquery.com/next/
$(this).next(".tags").slideDown(700, function(){

You need to target the tags that is the next adjacent element only:
$(document).ready(function(){
$(".tags-link").click(function() {
$(this).next(".tags").slideDown(700, function(){
//end animation
});
});
});

You can set a data attribute on both the span with class "tags-link" and the ul with class "tags". Then when you click the ".tags-link" element, it will show the ".tags" element with the same data attribute.
For example:
HTML
<span class="tags-link" data-id="1">Tags</span>
<ul class="tags" data-id="1">
<li> {Tag} </li>
</ul>
jQuery
$(document).ready(function(){
$(".tags-link").click(function() {
var id = $(this).attr('data-id');
$(".tags[data-id='" + id + "']").slideDown(700, function(){
//end animation
});
});
});

jQuery Selector or Code Not Working

I'm creating a twitter-like app as a learning exercise and have the following at the beginning of my JS file:
$(function(){
setInterval(update, 3000);
$('.tweet li a.username').on('click', function() {
alert('hey!');
});
$('.showMore').on('click', function() {
moreIndex += 5;
update();
})
});
The alert() is filler for another function that I want to fire when the username is clicked. My generator is creating the following HTML for each tweet:
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text </li><li class="date"> Date </li>
</ul>
</ul>
This is contained in a div with the class tweetDiv.
I've tried many selectors but am unable to get the alert to fire. Is my selector incorrect? Or is it something else?

It is something else. Your selector looks correct.
Most probably your code generates new tweets that don't have bound events. You should better use event delegation to fix that:
$('.tweets').on('click', '.tweet li a.username', function() {
alert('hey!');
});
Here .tweets element is supposed to be static and not regenerated dynamically.

First of all you need to make the wrapper function a self invoking function.
Moreover as you are binding a click even on 'a' tag hence you need to prevent its default behaviour.
Please refer to the fiddle
JS
(function () {
//setInterval(update, 3000);
$('.tweet li a.username').on('click', function (e) {
e.preventDefault();
alert('hey!');
});
$('.showMore').on('click', function () {
moreIndex += 5;
update();
})
})();
HTML
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text</li>
<li class="date">Date</li>
</ul>
</ul>

jQuery .show & .hide not working

I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>

Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers

You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.

How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>

jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();

$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})

Show and hide <div>s with jQuery event

There are several advanced jQuery plugins which filter <div>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as
<ul id="filters" class="menu" indicator="filter">
<li>All</li>
<li>First</li>
<li>Third</li>
</ul>
and we want to control the display of contents:
<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>
What is the simplest jQuery Javascript code to do so?
By default, all <div>s are shown, when we click on a <li> from menu (e.g. FIRST), jQuery will filter the <div>s to only show <div>s in which the class is "first".

Don't use attribute "indicator" as it doesn't exist. Use the class element as below. Also the A elements are not needed.
<ul id="filters" class="menu">
<li class="selected all">All</li>
<li class="first">First</li>
<li class="third">Third</li>
</ul>
Then your script
// hide all divs
$('div.box').css('display','hidden');
// add click handler on control list
$('ul#filters li').click(function() {
var classList =$(this).attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item != 'selected') {
$('div.'+item).css('display','block');
}
});
});

$(function(){
$('#filters li a').live('click', function(){
$('.box').hide();
indirector = $(this).attr('indicator');
indirector = indirector.substring(1);
if(indirector == '')
$('.box').show();
else
$('div.' + indirector).show();
});
});
Reference

Use the class attribute instead of indicator and try the following:
$('#filters li').click(function(){
$('div.' + $(this).attr('class')).show();
});
for this to work you would have to assign an all class to your first LI as well as all of your DIVs. Hope this helps!

try this code,
$('#filters li').click(function(){
$("div.box").hide();
$('div.box' + $(this).children('a').attr('indicator')).show();
});

how to select a li a based on the text using jQuery

How can I select a given li a element so that it is selected by default?
Please refer to this question to see the example that I'm working with...
How can I navigation up and down a ul using two buttons?
Basically I need to select the Patient Test li a item by default.

Try this:
$(function(){
$("#MainMenu li:contains('PATIENT TEST')").click();
});

You could do something like this
$('li a').each(function(){
if($(this).text() == 'PATIENT TEST'){
//do something here
}
});
Example: http://jsfiddle.net/jasongennaro/uuaKH/

Try:
<script type="text/javascript">
$(function() {
$('#MainMenu li > a').eq(0).focus()
});
</script>

set in the loaded html, since the next click will remove and reset the "status", based on the other post
<div id="MainMenu">
<ul>
<li class="menuActive">PATIENT TEST</li>
<li>QC TEST</li>
<li>REVIEW RESULTS</li>
<li>OTHER</li>
</ul>
</div>

I just had to create an ID for each li and then use jQuery addClass and removeClass to swap the classes.
$("#repeatMenuItem").removeClass("active");
$("#deleteMenuItem").removeClass("active");
$("#okMenuItem").addClass("active");