Develop Reference

Simplify JavaScript Accordion

I have got a script which works really well for creating accordions. The only issue is I have to create extra sections all the time to add a new one. Is there any way that it can be simplified to minimise the extra work and script?
$(document).ready(function(){
$(".accord-one").click(function(){
$(".accordoneContent").slideToggle("normal");
});
});
$(document).ready(function(){
$('.accord-two').click(function(){
$(this).next('.accordtwoContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-three').click(function(){
$(this).next('.accordthreeContent').slideToggle("normal");
return false;
});
});
$(document).ready(function(){
$('.accord-four').click(function(){
$(this).next('.accordfourContent').slideToggle("normal");
return false;
});
});

What if you just remove the "numbers"?
$(document).ready(function() {
$(".accord").click(function() {
$(this).next(".accordContent").slideToggle("normal");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">button 1</div>
<div class="accordContent" style="display:none">content 1</div>
<div class="accord">button 2</div>
<div class="accordContent" style="display:none">content 2</div>

In your markup change all the accordion classes (accord-one, accord-two etc.) to just accord and then change all the content classes (accordoneContent, accordtwoContent etc.) to just accord-content. Then you just need this code for them all to work...
$(document).ready(function(){
$('.accord').click(function(){
$(this).next('.accord-content').slideToggle("normal");
return false;
});
});
That will attach the click event handler to each accordion element and look for the relative content to toggle.

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!

You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.

No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>

try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

How do I store multiple divs with toggleClass in localStorage?

I'm trying to add localStorage to the toggleClass function in jQuery, so that multiple divs with the .selected css class stay .selected when reloading or closing the browser. The toggleClass seems to work, but I can't seem to get the localStorage to work. What am I doing wrong?
Here's the fiddle.
JS:
$(function(){
$('.mix').click(function() {
window.localStorage.setItem('test',$(this).toggleClass('selected'));
});
if(localStorage.getItem('test')){
$(this).toggleClass('selected');
}
});
HTML:
<div id="box" class="p001 mix">Div 1</div>
<div id="box" class="p002 mix">Div 2</div>
Thanks in advance.

You need to uniquely identify each div element, here in example I have used data-* prefixed custom attributes. On page load you need to iterate the objects and target the elements on which the value of key is set to true
HTML
<div data-id="1" class="p001 mix">Div 1</div>
<div data-id="2" class="p002 mix">Div 2</div>
Script
$(function() {
$('.mix').click(function() {
$(this).toggleClass('selected');
var lsid = 'test' + this.dataset.id;
window.localStorage.setItem(lsid, $(this).hasClass('selected'));
});
$('.mix').each(function() {
var lsid = 'test' + this.dataset.id;
if (localStorage.getItem(lsid) && localStorage.getItem(lsid) == "true") {
$(this).addClass('selected');
}
})
});
Fiddle
Note: Identifiers in HTML must be unique, thus removed id="box" and used CSS based on class

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});

Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});

Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/

Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

Find the id by class in nested div jquery

I have an html like this
<div class='click' id='1'>
one
<div class='click' id='2'>
two
<div class='click' id='3'>
three
<div class='click' id='4'>
four
<div class='click' id='5'>
five
</div>
</div>
</div>
</div>
if i have and click event on class click ,there is any way to return the id of which i click
such as
$('.click').click(function(){
alert('id whitch i click')
});
Becase if i click on three i allway get the id of one and two three.

Sure, just do this:
$('.click').click(function(e){ //e=event
alert($(this).attr("id")); // alert clicked element's id
e.stopPropagation(); // stop event propagation so it doesnt propagate to click 1 and click 2
})
Update: As mentioned by Felix Kling, you can access de DOM directly and use:
alert(this.id);

Demo: http://jsfiddle.net/tzJUN/ using this.id http://jsfiddle.net/c65x9/
If you keen : jQuery attr vs prop?
Stop propogation will stop the click event the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
API:
.stoppropagation - http://api.jquery.com/event.stoppropagation/
Code
$(document).ready(function () {
$('.click').click(function (event) {
event.stopPropagation();
alert($(this).prop("id")); //<< --- or this.id
});
});

$('.click').click(function(e){
$(this).attr("id");
alert($(this).attr("id"));//here you can see your clicked id
})

Yes. its simple
$(document).ready(function(){
$('.click').click(function(){
var ID=$(this).attr('id');
alert(ID);
//This ID varible will return ID of the Div Clicked
});
});