We Keep Coding

div tag not collapsing/expanding using jquery

I've the below html and the div containing class tabHeader is not expanding/collapsing at all.
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>
Have written the below jquery to collapse/expand the div tabHeader
$("#tabHeader").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.next();
$insideTabHeader.slideToggle(500, function () {
});
});
I'm not sure why the above jquery isn't working. Any help/solution would be of great help.
Thanks in advance.

1- Use the anchor id or class instead of the div
2- use $tabHeader.closest('li').next(); instead of $tabHeader.next();
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
Demo
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabHeader">
<li>1JL(Mobile)</li>
<div class="insideTabHeader">
<li>Network</li>
<li>Application</li>
<li>Integration</li>
<li>Infrastructure</li>
</div>
</div>

Set Element active and the other inactive (dynamic)

I have a listbox
<div id="listboxid1" class="listboxFilters">
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div> <div class="listboxChosenFilter">3</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div> <div class="listboxChosenFilter">*</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div> <div class="listboxChosenFilter">2</div> </div>
</div>
its a normal listbox, the question is now , how can I only set one element to active , and the others then to inactive
my first guess was an onlick on an item, I add a classname named active and before I would do a foreach for the listboxid1 element and set all to inactive, but is this really the common and best way?? :
<script>
function clearAll(element) {
element.each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.removeClass("active");
});
});
}
jQuery.fn.multiselecter = function () {
$(this).each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.click(function () {
clearAll(checkbox.parent());
checkbox.addClass("active");
});
});
});
};
$("#listbox1").multiselecter();
</script>

I guess you are using jQuery, so try this functions:
On click on anyitem with class .listboxFilterItem call setActive function
$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
$('.listboxFilterItem').each(function(){
$(this).removeClass('active');
});
elem.addClass('active');
}

Try this:
$(".listboxFilterItem").click(function (e) {
$(".listboxFilterItem").removeClass("active");
// or $(".active").removeClass("active");
$(this).addClass("active");
});
Check this on jsfiddle

$(this) - element, which was clicked
$(this).siblings() - all his neighbours, except himself.
$(".listboxFilterItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});

Matching text within a parent element

I am attempting to check if 2 divs contain the same text, and if they do then add a style to the parent div.
I have this working fine with the below code, but my problem is that the divs are all looking for a match and not just the divs that are in the parent? if you look at the below
<div class="infobox">
<div class="date">8</div>
<div class="secdate">8</div>
</div>
<div class="infobox">
<div class="date">1</div>
<div class="secdate">11</div>
</div>
<div class="infobox">
<div class="date">8</div>
<div class="secdate">11</div>
</div>
and the jQuery
jQuery(function ($) {
$('.date').each(function () {
var myhtml = $(this).html().split(' ')[0];
var ele = $(this);
$('.secdate').each(function () {
myhtml == $(this).html().split(' ')[0] ? $(ele).parent().css('background', '#ffff00') : ""
})
})
});
Fiddle
the third div is having the style applied, which it shouldn't as the 2 divs within don't match?

This seems much simpler:
$('.infobox').each(function () {
if ($(this).find('.date').text() == $(this).find('.secdate').text()) $(this).css('background', '#ffff00')
})
jsFiddle example
Loop over the parent (infobox) and just compare the text of the date child to the secdate child.

Seems like it should be simpler:
jQuery(function ($) {
$('.date').each(function () {
var dateText = $(this).text();
var secdateText = $(this).next('.secdate').text();
if (dateText == secdateText) {
$(this).parent().css('background', '#ffff00');
}
});
});
Fiddle

I changed things a little bit:
$(document).ready(function(){
$('.infobox').each(function () {
if( $(this).children('.date').html() == $(this).children('.secdate').html() )
$(this).css('background', '#ffff00');
});
});
This way you don't even need a loop.
I tested here and it works like charm :)
Hope it helps

Find nearest element

I have this html:
<div class="row">
<article>1</article>
<article>2</article>
<div class="load-work"></div>
<article>3</article>
<article>4</article>
<div class="load-work"></div>
<article>5</article>
<article>6</article>
</div>
What I want to do is to find nearest .load-work to clicked article. My current JS is:
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).closest('.row').find('.load-work').show().addClass('loaded-work')
})
});
But it doesn't work - it finds each. Here's jsfiddle

You can try this with .nextAll() and :first:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
});
Fiddle
Or better one:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
if($(this).nextAll('.load-work:first').length){
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
}else{
$(this).prevAll('.load-work:first').show().addClass('loaded-work');
}
});
Updated fiddle

Use following
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).parent().closest('.row').find('.load-work').first().show().addClass('loaded-work')
})
});
Working fiddle=> http://jsfiddle.net/naw8W/3/

Element targeting in jquery

I have an element that I am using as an expander. When I click on it uses the toggle function to show/hide the expander-container element.
<script type="text/javascript">
$(document).ready(function () {
$(".expand-icon").click(function () {
$(".expander-container").toggle(500);
});
});
<img class="expand-icon" src="./Content/Icons/toggle-expand-icon.png" alt="some_text" />
<div class="expander-container" >
...
</div>
How can I target only the next occurence of the expander-container element without targeting all of them on the page?

I think you should go for go for
$(".expand-icon").click(function () {
$(this).next('.expander-container').toggle(500);
});

Use .next()
$(document).ready(function () {
$(".expand-icon").click(function () {
$(this).next(".expander-container").toggle(500);
});
});
Here is the working demo : http://jsfiddle.net/XLNM5/