Develop Reference

How to get DIV ID on click

I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.

With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo

Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.

Jquery - Adding event to specific div that shares class name with others

I'm looking to add a mouseup event to a series of divs, that when clicked, reveal a child div ('menu'). All the parent divs share the same class, for example:
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
etc...
However, I'd like the event to only trigger when I've clicked that particular 'container'. When I click on another 'container', I'd like the same thing to happen, however, I'd also like the previously opened 'menu' to hide. The only way I have managed to do this (being a JQuery noob), is to create variables for each container, as well as giving them unique classes. For example:
$(document).mouseup (function (e){
var buttonOne = $(".containerOne");
var buttonTwo = $(".containerTwo");
var menuOne = $(".containerOne").find(".menu");
var menuTwo = $(".containerTwo").find(".menu");
if(buttonOne.is(e.target)){
menuOne.toggle(100);
menuTwo.hide();
}
else if(buttonTwo.is(e.target)){
menuTwo.toggle(100);
menuOne.hide();
}
else {
$(".menu").hide();
}
});
Quick JSFiddle
This then creates lines and lines of code the more containers I add, and I feel there is almost certainly an easier way of doing this. Apologies if this was written poorly, it's been a long day, ha.

Add a new class to the containerxxx element then use a simple click handler
<div class="containerOne container">
<div class="menu">
<p>Text</p>
</div>
</div>
<div class="containerTwo container">
<div class="menu">
<p>Text</p>
</div>
</div>
then
var $menus = $('.container .menu');
$('.container').mouseup(function (e) {
var $menu = $(this).find('.menu').toggle();
$menus.not($menu).hide()
});
Demo: Fiddle

How about something like
$(".container").on("click", function() {
var mine = $(".menu", this).toggle(100);
$(".menu").not(mine).hide();
});

How can I toggle the element that is clicked and hide all others?

I want to hide any visible span elements if any is visible, and toggle it again if a element is clicked
<div class="item">
element1 <span>span1</span>
<br>
</div>
<div class="item">
element2 <span>span2</span>
<br>
</div>
<div class="item">
element3 <span>span3</span>
<br>
</div>
<div class="item">
element4 <span>span4</span>
<br>
</div>
JS
$('.item span').hide();
var all_spans = $('.item a').parent().find('span');
$('.item a').click(function(e) {
e.preventDefault();
// hide all span
all_spans.hide();
$this = $(this).parent().find('span');
// here is what I want to do
if ($this.is(':hidden')) {
$(this).parent().find('span').show();
} else {
$(this).parent().find('span').hide();
}
});
live example http://jsfiddle.net/BGSyS/
the issue is when I click for example 'element 1' 'span1' is still visible and I want to toggle this

$('.item span').hide();
$('.item a').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('span');
$(".item span").not($this).hide();
// here is what I want to do
$this.toggle();
});
Check demo
Update with explanation:
The problem is when you hide all spans, you also hide the current span => all spans have the same state (hidden), and your next line display it again. You have to exclude the current element when hiding and use toggle method to toggle its state (simpler than using if to check)
Another problem is try to avoid implicit global by using var to declare $this:
var $this = $(this).parent().find('span');

It can be much simpler than that: Updated Fiddle
var all_spans = $('.item span').hide();
$('.item a').click(function(e){
var thisSpan = $(this).parent().find('span'),
isShowing = thisSpan.is(":visible");
// Hide all spans
all_spans.hide();
// If our span *wasn't* showing, show it
if (!isShowing) {
thisSpan.show();
}
e.preventDefault();
});
The main problem with your code was that you were checking whether the a element was visible, rather than checking whether the span was.
Your code also fell prey to The Horror of Implicit Globals on this line:
$this = $(this).parent().find('span');
...which creates a global variable $this because you didn't declare it anywhere.

You can hide all the spans by using a span selector, then using the $(this) keyword to find the span next to the clicked link:
$(".item a").click(function() {
// Hide all item spans
$(".item span").hide();
// Show the element next to this
$(this).next().show();
});

begin snippet: js hide: false
language: lang-js
function itemshow(n,e){
var idx = "num_"+n;
$(".item_title").each(function(){
var idn = $(this).next().attr("id");
if (idn == idx){
$("#"+idn).toggle();
}else{
$("#"+idn).hide();
}
});
}
language: lang-css
.item_desc{
display: none;
}
language: lang-html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="div_body">
<div class="item_title" onclick="itemshow(1,this)">
1) Question
</div>
<div class="item_desc" id="num_1">
Answer
</div>
<div class="item_title" onclick="itemshow(2,this)">
2) Question
</div>
<div class="item_desc" id="num_2">
Answer
</div>
<div class="item_title" onclick="itemshow(3,this)">
3) Question
</div>
<div class="item_desc" id="num_3">
Answer
</div>
</div>
end snippet

Cycle through divs?

I have this HTML:
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
</div>
Show me next box
Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.
The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.

$('a').click(function() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
});
Live demo.

$('a').click(function(){
$('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show();
});

What code do i need to collapse a div when another is open?

i use a simple bit of code to make a div collapse, this is it:
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none")?"":"none";
}
//-->
</script>
what code do i add to make it recognise when one div is open an collapse the previous div?here's the link I'd use:
Link 1
<div id="div1" width="300px" style="display:none"></div>
Any ideas?

This is something jQuery works really well for. Here is a working example in jsfiddle.
http://jsfiddle.net/mrtsherman/uqnZE/
Example html
<div class="category">A
<div class="artists">Apple<br/>Ace<br/>Ants<br/></div>
</div>
<div class="category">B
<div class="artists">Bee<br/>Bop<br/>Book<br/></div>
</div>
<div class="category">C
<div class="artists">Cake<br/>Chimp<br/>Charles<br/></div>
</div>
And the code:
$(".category").click( function() {
$(".artists").hide();
$(this).children(".artists").show();
});
Basically what it does is hide all the divs that contain artists, then shows the div for the one you clicked on. Really simple.

If you were willing to use jQuery, the selector of your interest is something along the lines of
$('div#parent-container > div').filter(':visible');
For example, if I were to demonstrate with next & previous, I would do it something like this. With targeted links it would work by appending ID's to the divs and referencing those in the href attribute of `anchors'. (now included within example)
Something to mess with:
$(function(){
//Reference Object
var $divs = $('div > div');
//Buffer for selected variable
var $selected = 0;
//Show first
$divs.eq(0).show();
$('#next').click(function(){
//Update selected var
$selected = $divs.filter(':visible');
//Save next to variable
var $next = $selected.next();
//Change Visibility
toggle($next);
//Prevent Default
return false;
});
$('#prev').click(function(){
$selected = $divs.filter(':visible');
var $prev = $selected.prev();
toggle($prev);
return false;
});
$('a').click(function(){
$selected = $divs.filter(':visible');
var selector = $(this).attr('href');
if(selector == '#') return false;
toggle( $( selector ) );
return false;
});
var toggle = function($toggle){
if(!$toggle.length) return false;
$selected.hide();
$toggle.show();
}
});
<!--Simple Implementation and dependancies-->
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
Show Item Four
<div>
<div id="item-1">One</div>
<div id="item-2">Two</div>
<div id="item-3">Three</div>
<div id="item-4">Four</div>
<div id="item-5">Five</div
<div id="item-6">Six</div>
</div>
div > div {
font-size:5em;
width:auto;
text-align:center;
padding:20px 0;
display:none;
}