We Keep Coding

how to show the div using this in jquery

what i need
i just need to show div.
code
<a href="javascript:void(0);" id="viewdetail" onclick="$(this).show();" style="color:green">view detail
<div class="speakers dis-non">
</div>
</a>
when I changed code to onclick="$('.speakers').show();" then its working fine.
problem occurs:
onclick="$(this).show()"
no div is shown.
i need when user click on particular anchor element then data should of that particular link click should be shown.

You have to target element using:
$(this).find('div').show();
Or to make it more specific with:
$(this).find('.speakers').show();

$(this) refers to the element you click on, in this case the a tag and not the div you want to show.
Try $(this).children('div').show();

This will show the div inside the anchor tag
$(this).children(".speakers").show();

You have to select first div element using:
$('this').children('div').show();

$(this) refers to the clicked anchor instead of the div. Use $(this).children('div.speakers').show(); to target div with speakers class inside the anchor.
<a href="javascript:void(0);" id="viewdetail"
onclick="$(this).children('div.speakers').show();"
style="color:green">view detail
<div class="speakers dis-non">
</div>
</a>
Working demo: http://jsfiddle.net/fw3sgc21/

Open a sub-menu using jQuery

I have this menu:
What I want to do: when I click the image button on the right (#sub-menu) I want it to open the sub-menu (.sports2).
this is a sub-item html code for an example:
<a href="#"><li> Golf
<img src="strokesmenu.png" id="sub-menu" />
<ul class="sports2">
<li>British Open</li>
<li>Masters</li>
<li>PGA Championship</li>
<li>US Open</li>
</ul>
</li></a>
Why this code isn't working for me?
$('#sub-menu').click(function(){
//$('.sports2').slideToggle("slow");
$(this).find('ul>li').slideToggle(slow);
})

first of all, <li>British Open</li> this structuring is so wrong I cannot even describe it how wrong it is.
convert it to the <li>British Open</li> if you want to make click-able while li try using below css or similar to that
ul li a {
display: inline-block;
width:100%;
height:100%;
}
also there must be only one item with one id having multiple item is against the W3C rules and clicking the little icon is not so user friendly. so instead give class to main item li and hanle the click with that one.
$('li.main').click(function(){
$(this).find('ul').slideToggle('slow');
})
apparently you cannot do that so you have to bind it to the img first change id to the class e.g. class="sub-menu"
$('li img.sub-menu').click(function(){
//$(this) -> img .next() -> ul
$(this).next().slideToggle('slow');
})
now the $(this).find('ul>li').slideToggle('slow'); should work but it will open every li and might cause some problem issues.
instead I suggest using $(this).find('ul').slideToggle('slow'); so the list can be opened/closed. you see the animation differences by trying it and choose the best one for you.
EDIT FOR CLICK BUG:
well not sure if I get it right but as I understand in some cases you need to redirect the page in others open the sub menu.
in that case you can check if the li has submenu or not the following code should do the trick.
$('li.main').click(function(){
if ($(this).has("ul")) // if has submenu
$(this).find('ul>li').slideToggle('slow');
else
// your redirect code.
})

add class to li by clicking on a link from nav menu

I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help

You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.

First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}

individually hiding drop-downs according to one child-jquery

So I've painfully got multiple drop-downs toggling states(hidden and shown) in JQuery but I have some code which tells the side bar which page is active and gives it the style active and I would like a drop down to not be hidden if there is a child active in it.
The top level link which you click to view the drop-down gets given the id "HAC"(has active child) if it has an active child but I think I might be burning my brain out on this.
Here's a jsfiddle page with the working demo of the problem.
the drop down is set out like this in a nav
<ul id="HAC" class='topLevel'>
<li class='subItem'>
<a class="active" href='thatpage.php'>That page</a>
</li>
<li class='subItem'>
<a href='thatotherpage.php'>That other page</a>
</li>
</ul>
thanks in advance for any help

I think what you are looking for is the jQuery :not selector. Here is an update to your fiddle
function dropDowns() {
//for each toplevel li a
$(".topLevel:not(#HAC) li a").each(function() {
//hide subitems if not HAC (has active children)
$(this).hide();
});
//Toggle show them on click
clickToggle();
}

Open/Close Icons

I'm doing some shennanigans with jQuery to put little plus/minus icons next to my expanders. Its similar to the windows file trees, or firebugs code expanders.
It works, but its not specific enough.
Hopefully this makes sense...
$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
event.preventDefault();
$(this).next('div').slideToggle(200);//find the next div and sliiiide it
$('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
event.preventDefault();
$(this).next('div').slideToggle(200);
$('img.expander').attr('src','img/content/info-open.gif');
});
<ul class="product-info">
<li>
<a class="img-link" href="#"><img class="expander" src="img/content/info-open.gif" alt="Click to exand this section" /> <span>How it compares to the other options</span>
</a>
<div class="toggle"><p>Content viewable when expanded!</p></div>
</li>
</ul>
There are loads of $('img.expander') tags on the page, but I need to be specific. I've tried the next() functionality ( like I've used to find the next div), but it says that its undefined. How can I locate my specific img.expander tag? Thanks.
EDIT, updated code as per Douglas' solution:
$('div.toggle').hide();
$('ul.product-info li a').toggle(function(event){
//$('#faq-copy .answer').hide();
event.preventDefault();
$(this).next('div').slideToggle(200);
$(this).contents('img.expander').attr('src','img/content/info-close.gif');
//alert('on');
},function(event) { // same here
event.preventDefault();
$(this).next('div').slideToggle(200);
$(this).contents('img.expander').attr('src','img/content/info-open.gif');
});

$(this).contents('img.expander')
This is what you want. It will select all of the nodes that are children of your list. In your case, all of your images are nested inside of the list element, so this will filter out only what you want.

How about making your click event toggle a CSS class on a parent item (in your case, perhaps the ul.product-info). Then you can use CSS background properties to change the background image for a <span> instead of using a literal <img> and trying to fiddle with the src. You would also be able to accomplish a showing and hiding on your div.toggle's.
ul.product-info.open span.toggler {
background-image: url( "open-toggler.png" );
}
ul.product-info.closed span.toggler {
background-image: url( "closed-toggler.png" );
}
ul.product-info.open div.toggle {
display: block;
}
ul.product-info.closed div.toggle {
display: hidden;
}
Using jQuery navigation/spidering functions can be slow when the DOM has many items and deep nesting. With CSS, your browser will render and change things more quickly.

Have you tried the .siblings() method?
$(this).siblings('img.expander').attr('src','img/content/info-close.gif');