We Keep Coding

How can i click and just own class can be shown on Javascript

<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
$(".class1").hide();
$(".item").click(function () {
$(".class1").show();
})
I want that when the user click div of item, its own class1 should be show();
But in my codes, when the user click item of div, all class1 shows.
How can i do that just own class can be shown?

To fix this you need to use DOM traversal to access the .class1 element(s) within the clicked .item. To do that you can use the this keyword within the event handler to access the element which raised the event. Try this:
$(".item").click(function() {
$(this).find(".class1").show();
})
.class1 { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item text-center">
Foo
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
Bar
<div class="class1">
<p> Something </p>
</div>
</div>
Note in the example that I used CSS to hide the .class1 elements instead of JS. This is because JS runs after the DOM has loaded, so can result in elements being visible for a short time before they are hidden. CSS runs before this, so avoids that occurrence.

$(".class1").hide();
$(".item").click(function () {
$(this).find(".class1").show();
});
<!--The parent divs should not be empty, otherwise when later in the code you call the .hide () method on their respective child divs, there would be nothing left to click on-->
<div class="item text-center">
item1
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
item2
<div class="class1">
<p> Something </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use the find () method, the find () method returns the descendant elements of the selected element. Like the code above

javascript toggle showing and hiding several div elements

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none
I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.
Codepen showing issue is https://codepen.io/billteale/pen/zwBBez
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
...and the current js is
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('MAY');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.
Can anybody tell me how to add to the code I have here to make this work for multiple elements?

It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div's with no extra script, Just add the new div id to the new anchor tags href. You should give a common class to all the div's like month to select them all.
$("a.btn").click(function() {
var id = $(this).attr("href");
$("div.month:visible").hide();
$(id).show();
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY" class="month">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="month hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.
The function will run through your divs and set the one that has the argument id as visible, and hide the others.
This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.
var divs = document.getElementsByClassName('div-toggle');
function toggle(id) {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.id == id)
div.style.display = 'block';
else
div.style.display = 'none';
}
}
<a href="#" onclick="toggle('MAY')" >MAY</a>
<a href="#" onclick="toggle('JUNE')" >JUNE</a>
<!-- first div, shows on page load -->
<div class="div-toggle" style="display:block;" id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="div-toggle" style="display:none;" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

div.style.visibility = "hidden"
this will completely hide your div. I'm pretty sure this is what you are asking for
also instead of that you can make a separate function and add o'clock to div
<div onclick="nameoffunction()"></div>
the function can take in a parameter and each div on click function can have the parameter of its id

Your div were messed up! The snippet is working now with the help of jQuery.
$("#JUNE").hide();
$("#MAY").show();
$('#button-may').on("click", function() {
$("#JUNE").hide();
$("#MAY").show();
});
$('#button-june').on("click", function() {
$("#JUNE").show();
$("#MAY").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

How to get the ID of a clicked element, when it or its children are clicked?

UPDATED
I think I may have inadvertently made the question confusing. This is an update that is more specific with updated code based on comments and answer I have been given so far. Thank you to everyone that has taken the time to comment and answer.
How can I get the ID of a <div> with the class of .button when I have a click listener for .button. If .button or any of its children are clicked, it should return the ID for that particular div with the class of .button.
This is what I have so far: New JSFiddle
HTML
<div class="row">
<div id="b1" class="button">
<h2>Button 1</h2>
</div>
<div id="b2" class="button">
<h2>Button 2</h2>
</div>
<div id="b3" class="button">
<h2>Button 3</h2>
</div>
</div>
jQuery
var selected = "";
$('.button').on('click', function(e) {
selected = e.target.id;
$('.button').css('backgroundColor', '#becde5');
$('#' + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
This is almost correct but does not propagate, if I click on a <h2> the function does not work. However if I click on the .button div itself it works.
Initial Question
I am trying to create a general function that can identify what child was selected from its parents click listener. The child may have its own children that would all be considered part of the same element so that if any of these children where selected they should also elicit the same response from the click listener.
This is an example of what I have working so far: JSFiddle
HTML consisting of three buttons that all have one child <h2> tag and share the <div class="row"> as their parent.
<div class="row">
<div class="b1 button">
<h2 class="b1">Button 1</h2>
</div>
<div class="b2 button">
<h2 class="b2">Button 2</h2>
</div>
<div class="b3 button">
<h2 class="b3">Button 3</h2>
</div>
</div>
jQuery that listens for a click on <div class="row">. It retrieves the first class name of the clicked element and stores it in a variable. The elicited response in this case is a change of the CSS style background-color though this is arbitrary and would change depending on the use of the function.
var selected = "";
$('.row').on('click', function(e) {
selected = e.target.className.split(" ")[0];
$('.b1, .b2, .b3').css('backgroundColor', '#becde5');
$("." + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
The fact that I am adding a lot of classes to elements purely to identify them on a click seems like it would not scale very well and is generally a bad approach. This method also means that I would always have to put the class name that identifies what element was selected at the beginning of its HTML class attribute. This could potentially clash with other functions using the same method.
Is there a better way to identify what child element was selected from its parents click listener, where a child may have other children that also require the same response from the listener?

EDIT based on the edited question:
I think that what you really want is the id of the element that triggered the event.
But by using e.target you have the target element... which is not necessarily the element that triggered the event.
See in this updated Fiddle.
So simply use $(this) as the selector to retrieve the id... Using .attr("id").
;)
Answer to the initial question:
To determine what can be "selected", I used a "clickable" class.
To avoid using id or class as an identifier to determine what has been clicked,
a data attribute can be usefull.
I used data-id... But you can use whatever you want, like: data-selected or data-target, and assign whatever value to it.
In the below code, I made two exactly identical rows, except their data-id value.
var selected = "";
$('.clickable').on('click', function(e) {
e.stopPropagation(); // To prevent bubbling.
// Reset all bg colors
$('.button').css('backgroundColor', 'initial');
$('.row').css('backgroundColor', 'initial');
// Find exactly what was clicked
if ($(this).hasClass("row")) {
var row = $(this).data("id");
selected = row + " (whole)";
}
if ($(this).hasClass("button")) {
// Find in which row
var row = $(this).closest(".row").data("id");
var btn = $(this).data("id");
selected = btn + " in " + row;
}
// Pale all buttons
$('.button').css('backgroundColor', '#becde5');
// Change bg color of the selected element
$(this).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
.row {
display: table;
width: 100%;
color: white;
border-spacing: 20px;
}
.button {
display: table-cell;
border-radius: 12px;
background-color: #6fa1f2;
text-align: center;
}
#selected {
font-size: 30px;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Selected : <span id="selected">no selection</span></span><br>
<div class="row clickable" data-id="row1">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>
<br>
<div class="row clickable" data-id="row2">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>

no need to id the subject, since it was the one clicked, i.e. e.target which with jQuery you cant select like $(e.target) without any trouble
then you need .closest('.button') to search up to the parent .button (if any)
$('.row').on('click', function(e) {
$('.row > .button').css('backgroundColor', '#becde5');
$(e.target).closest('.button').css('backgroundColor', '#3b71c6');
console.log($(e.target).html());
});
.button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="button">
<h2>Button 1</h2>
</div>
<div class="button">
<h2>Button 2</h2>
</div>
<div class="button">
<h2>Button 3</h2>
</div>
</div>

If you avoid giving an identifier (classes, IDs, etc) you'd need to do some manual checking for tag type to see what you clicked on (so basically, an identifier as well)
Here's an example, and not very memory efficient method
jsfiddle example
$('.row, .row *').on('click', function(e) {
e.stopPropagation()
$('.button').removeClass('active')
$('.button').css('backgroundColor', '#becde5');
$(this).toggleClass('active')
$('#selected').html(e.target.tagName + ': ' + e.target.className);
});
If you bind a click to div.row and clicked the h2 tag inside the button, and want to manipulate the h2 tag, you could check its tagName- but that less scalable than your OP.

Change Text on another Div

Good evening Community,
I have a problem with my code.
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
I want if I hover over the div "mbubble" that the class "thome" will change it's text. I tried to do that by making them visible / invisible.
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
But it's sowhing no affect?
Can you tell me how you would do that? Or at least any way that's working to change the text by hovering?
Best regards,
Michael

How about this:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})

If your structure is really that simple, then a trick with pointer-events could work:
the idea is to kill pointer-events on a and reactivate it only on #mbubble, since when you hover a child, parent is hovered too, the selector can be taken from the parent .
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
Now, if you realize that without pointer-events but only a;hover it works , you may understand it can be usefull only if there is other content in <a> that should not react . only clicking on #mbubble will fire the link.Was your example too little ? if not, just use a:hover
http://caniuse.com/#search=pointer-events

It look doable in css, anyway, while not recommmended, there is a quick inline solution in javascript using the transversal DOM, like this:
You got to keep in mind that it can have strange behaviors, non easily copiable by right clicking, this is why inline javascripts should not be used directly. There is workaround around it, good luck.
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
So a more nicer way is to use a function like this:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
Still, this isn't clean enough, the good way in javascript is to add an event listener, like this:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
This way the html part is left untouched. (..)

toggle class with js, only to selected div

I am trying to toggle visibility on a div by clicking a button in a neighboring div. I'm using a class .expand to fire the onClick and another class .target as the target, but the problem is that every div with the .target class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: http://www.bootply.com/oSGM0jOG6q#.
$('.expand').on('click', function(e){
$(".target").toggleClass("hidden");
$(".target").toggleClass("visible");
});
HTML
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden">
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.

You can use .closest() to find parent div with class col-sm-4 then use .next() to find target
$('.expand').on('click', function(e){
$(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});

Try to use .closest() to get the static parent, i just meant static parent as .thumbnail, since col-sm-4 this class would get change depends upon the layout, i assume. So grab the closest .thumbnail and get its parent then target the next sibling to it.
$('.expand').on('click', function(e){
$(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});
DEMO

Here is your bootply http://www.bootply.com/gk8gtlaH1L
Add a div with a new Expand wrapping both the divs. It would be easy for you :)
JS CODE
$('.newExpand').on('click', function(e){
$(this).find(".target").toggleClass("hidden");
$(this).find(".target").toggleClass("visible");
});
HTML CODE
<div class="newExpand">
<!-- Thumbnail -->
<div class="col-sm-4">
<div class="thumbnail">
<img src="//placehold.it/400x300&text=Photo1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Expand</p>
</div>
</div>
</div>
<!-- Big-Image -->
<div class="col-xs-12 target hidden"><!-- use js to add/remove class"hidden" on button click -->
<div class="thumbnail">
<img src="//placehold.it/1200x900&text=Photo1">
<div class="caption">
<h3>HighRes</h3>
<p>Close</p>
</div>
</div>
</div>
</div>

To use a declarative approach that doesn't tie the JavaScript too heavily to the DOM structure, you could set data-target on each button element to specify the target element to be toggled when the button is clicked, and update the click handler to find the element(s) identified.
For example:
$('.expand').on('click', function(e){
var sel = $(e.target).data("target");
if (sel) {
$(sel).toggleClass("hidden");
$(sel).toggleClass("visible");
}
});
And in the HTML:
<!-- Thumbnail -->
<div class="col-sm-4">
Expand
</div>
<!-- Big-Image -->
<div id="bigImage" class="hidden">
This div will be hidden/shown when the button is clicked
</div>