Develop Reference

How to target next element with class name?

DEMO
I am doing a simple jquery accordian effect as below.
JQUERY
$(function ($) {
$('.Accordian').find('.Btn').click(function () {
$(this).next('.Content').slideToggle('fast');
$('.Content').not($(this).next()).slideUp('fast');
});
});
HTML
<div class="Accordian">
<div class="Btn"></div>
<div class="Content"></div>
</div>
This work great however if content is placed between .Btn and .Content then it breaks.
QUESTION
How to directly target the next available class name relative to the
button clicked?
How to target all elements of a class name except the next available
class name relative to button clicked?

Try with siblings()
$(function ($) {
$('.Accordian').find('.Btn').click(function () {
//cache the value so that it can be used in the next statement
var $content = $(this).siblings('.Content').slideToggle('fast');
$('.Content').not($content).slideUp('fast');
});
});

Try to use .nextAll() along with .first() to accomplish your task, Actually here we have used .first() for a safety purpose.
$('.Accordian').find('.Btn').click(function () {
var targetElem = $(this).nextAll('.Content').first();
targetElem.slideToggle('fast');
$('.Content').not(targetElem).slideUp('fast');
});
DEMO

jquery inside javascript function to hide div array

I am using jquery inside the javascript function to hide & show div.
I need to show only div "Area" while hide other div
This one works, when i directly put the name of the div to hide & show :---
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
function area_visible()
{
$('.Area').show();
$('.Area-1').hide();
$('.Area-2').hide();
$('.Area-3').hide();
}
This one does not works if i try to access using array of div class, even alert message is not displayed 4 times for loop :----
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
var area_id = [
"Area" , "Area-1", "Area-2", "Area-3"
];
function area_visible()
{
$(area_id).each(function(index, element) {
if(element != area_id[0] )
{
$("#" + element).hide();
}
alert('11');
});
}
Please suggest. How to hide and show div by taking there name from an array (and i want to use jquery inside javascript function) ?

Change
$("#" + element).hide();
to
$("." + element).hide();
You are trying to target an ID you must use . to target class.

in your first function you are using class $('.Area-1') and the second function you are selecting with ID $("#"+element)
so the fix is easy just change '#' to '.' in the second function

You have to change your id selector to a class selector and initiate the function:
$("." + element).hide(); // for your second function.
and initialize your func:
area_visible(); // for both it will work.

How do I apply jQuery's slideToggle() to $(this) and do the opposite to all other elements?

What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.

Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)

Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo

I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo

Jquery: how to know which element was clicked?

I have an html code with 5 divs. They all have the same class, and different IDs.
Then, within javascript I have this:
$(".pics").click(function() {
alert("hey!");
});
where .pics is the name of the class of all the divs. The idea is that when I click on any of them, a certain script should be triggered, but I also want to know which one of the divs was clicked upon.
How do you go about it?
Thanks.

Assuming your ids are like this:
<div class="pics" id ="pic1">...</div>
<div class="pics" id ="pic2">...</div>
<div class="pics" id ="pic3">...</div>
<div class="pics" id ="pic4">...</div>
<div class="pics" id ="pic5">...</div>
Then in your javascript:
$(".pics").click(function() {
alert("You are clicking "+$(this).attr('id'));
});
And you should see something like this:
You are clicking pic1

Try this:
$(".pics").click(function() {
alert("hey!" + $(this).attr("id"));
});

You can get this information from the target of the click event, as shown here.
$(".pics").click( function (e) {
var clickedElement = e.target;
})

this refers to that element.
$(".pics").click(function() {
var me = $(this);
alert(this.id);
});

Show/hide div on click if div class names match

I have two sets of divs — one that is the 'main' div and one that is the 'extra' div. Both of these have classes that are brought in via the CMS.
What's the best way of showing/hiding (preferably slideToggle) each div, on click, that corresponds to the div clicked?
<div class="each-business-content-main" data-id="group-1"></div>
<div class="each-business-content-main" data-id="group-2"></div>
<div class="each-business-content-extra group-1"></div>
<div class="each-business-content-extra group-2"></div>
These 'group-1' or 'group-2' classes aren't known in advance so can't be hard-coded in. Essentially I'm wondering how, if you click on one div it shows another div (as long as they share the same class name).
I've tried this so far:
$('.each-business-content-main').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
jQuery('.each-business-content-extra').slideUp();
jQuery('.each-business-content-extra .' + id).slideDown();
});
But I'm guessing hrefs and id might come in useful? Or some other data-id...

If you assign a data attribute to your divs it makes this pretty easy:
<div class="each-business-content-main group-1" data-group="1">main 1</div>
<div class="each-business-content-main group-2" data-group="2">main 2</div>
<div class="each-business-content-extra group-1" data-group="1">extra 1</div>
<div class="each-business-content-extra group-2" data-group="2">extra 2</div>
$('.each-business-content-main').click(function () {
$('.each-business-content-extra.group-' + $(this).data('group')).slideToggle();
});
jsFiddle example

Have you tried replacing this:
jQuery('.each-business-content .' + id).slideDown();
...with this:
jQuery('.each-business-content #' + id).slideDown();
jQuery selects classnames as .classname and IDs as #id.

Try
$('.each-business-content').click(function () {
var that = $(this);
$('.each-business-content').each(function () {
if ($(this) === that) {
$(this).slideUp();
} else {
$(this).slideDown();
}
});
});

Can you try this code at jsFiddle? Don't need group 1 and group 2, I use index instead of the name of the id. Is that all right for you?
$('.each-business-content-main').on('click', function (e) {
$('.each-business-content-extra').(':eq(' + $(this).index() + ')').slideDown();
$('.each-business-content-extra').not(':eq(' + $(this).index() + ')').slideUp();
});