We Keep Coding

How to change text under an image when the image is clicked/hovered on

I'm creating a page for a company where they have pictures of the 4 founders all side by side. The text under all 4 images needs to change based on what photo is clicked or hovered on. So one says "mark" in bold and under that it will have his qualifications. But that will all be replaced when I click "kim" who is the next picture.
I'm very new to HTML, CSS, and have never tried javascript so this is my first attempt.
I want the text to be styled the way I want, but I can't find a way to update it all. I only figured out that I can print raw text.
Is there a way to call a div to put the text there and replace it with a new div for each image click?
Like instead of writing .html("Mark does xyz") you could instead paste in the entire div "tr1" with the changed button and heading and paragraph?
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>

You can use show/hide method for your requirement.
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
#tr2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

$('#Mark').click(function() {
var elementToClone = document.getElementById('tr1');
var clone = elementToClone.cloneNode(true);
var container = document.getElementById('container');
// Then you need to append that cloned element into a container on the page.
container.appendChild(clone);
});
The container will be en element in your HTML that currently is not there. This is just a place where you want this cloned HTML to go:
<div id="container></div>
This will get you to a point where you've copied the HTML you need and placed it where you want it on the page. When you click a different image, you'll need to remove this HTML, clone the other HTML and append it to container. You'll also probably need an if statement in there to check if container contains something already.
You're using jQuery in your question, so this answer uses the jQuery click function -- if you don't have jQuery included, you'll need it.
You can also use these vanilla js click methods:
<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />
or
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);

You're trying to use JQuery to achieve this and following does the job. There used the common class "trainer-text" to hide all overlay texts to hide at the initial point. Use some css to make the text on your images. Refer the following to achieve that. https://www.w3schools.com/howto/howto_css_image_overlay.asp
/*
Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
$("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
$("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
$("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
$("#tr2").css("display", "none");
});
/*
Use the following if you need display text for click event
*/
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
.trainer-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

In javascript, how do I remove previously clicked sibling div, so that only one answer displays at a time?

I must use a for loop to go through the h2 elements in the array and remove the class attribute for all h2 elements that aren’t the one that has been clicked. I also need to remove the class attributes for all of the div siblings of the h2 elements that weren’t clicked, but I am not sure how to do this. The code I am trying to use is under the "//remove all other answers" comment. Please help me out, thanks!
var toggle = function() {
var h2 = this; // clicked h2 tag
var div = h2.nextElementSibling; // h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
// toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
//remove all other answers
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
for (var i = 0; i < h2Elements.length; i++ ) {
if(!h2Elements.onclick) {
h2.removeAttribute("class", "minus");
} else {
h2Elements.onclick;
}
}
};
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div id="1">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2>What is jQuery?</h2>
<div id="2">
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div id="3">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

This example should accomplish what you've outlined in your question. Here I'm looping through all H2 elements and processing the one that was clicked separately.
$('h2').on('click',function(){
var thisH2 = this;
$('h2').each(function(){
if (this === thisH2){
if ($(this).next().is(":visible")){
$(this).removeClass('plus').addClass('minus');
$(this).next().hide();
}else{
$(this).removeClass('minus').addClass('plus');
$(this).next().toggle();
}
}else{
$(this).removeClass('plus').addClass('minus');
$(this).next().hide();
}
});
});
h2{
cursor:pointer;
}
h2:hover{
text-decoration:underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2 class="minus">What is JavaScript?</h2>
<div class="answer" style='display:none'>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2 class="minus">What is jQuery?</h2>
<div class="answer" style='display:none'>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2 class="minus">Why is jQuery becoming so popular?</h2>
<div class="answer" style='display:none'>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

There is an easy common pattern for your type of problem. Give all questions a single, shared classname. Then on click
use document.getElementsByClassName with the shared classname and apply css display:"none" (or a class that achieves this style) on all elements
set display:"block" or display:"inline" on the current selection

You've wrapped all this code in your toggle function, but the function is not called anywhere.
You should attach the event listener to your h2 tags after defining them with jQuery.
The order of your set/remove attributes is a little off.
Try coming this working example to your code:
var h2 = $("h2");
h2.on('click', function() {
for (var i = 0; i < h2.length; i++) {
if (h2[i] !== this) {
h2[i].setAttribute('class', 'red');
} else {
h2[i].removeAttribute('class', 'red');
}
}
})
I've use the example class red here if you wanted to say, toggle the color in your CSS. You can use whatever class here in place of my example.

Hope this helps. What I have done is I hide all div(and remove class red from all h2 tag other than one which is click in for loop) and toggle clicked h2 and it's sibling.
function func(e){
var x=document.getElementsByClassName("ans");
for(var i=0;i<x.length;i++){
if(x[i].classList.value.indexOf("hide")<0 && x[i]!==e.nextElementSibling){
x[i].classList.toggle("hide");
x[i].previousElementSibling.classList.toggle("red");
}
}
e.classList.toggle("red");
e.nextElementSibling.classList.toggle("hide");
}
.red{
background-color:red;
}
.hide{
display:none;
}
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2 onclick="func(this)"><a href="#" >What is JavaScript?</a></h2>
<div id="1" class="ans hide">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2 onclick="func(this)">What is jQuery?</h2>
<div id="2" class="ans hide">
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2 onclick="func(this)">Why is jQuery becoming so popular?</h2>
<div id="3" class="ans hide">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

To help you identify your sections from your Subheadings
Add this to all sections you can use different identifiers
I'd suggest adding a class or attribute
<h2>What is JavaScript?</h2>
<div class="section" id="1">
This will enable us to select all the divs will the class section
const sections = document.querySelectorAll('.section')
Then we can loop over them all and add the minus class I'd suggest just adding this in the mark up if you intend this to be your default state.
sections.forEach(el => {
el.classList.add('minus')
});
Now we can loop over all your anchor tags I'd suggest giving them an identifier such as a class to separate them from other anchor tags but the example i'll just select all the anchor tags.
We attach a function reference to the on click of the element called openSection which we'll define shortly.
document.querySelectorAll('a').forEach((el, index) => {
el.onclick = openSection;
})
Now, this is the function that will toggle your minus and remove it from other items
Your function gets passed an event which will contain the information we need to get the correct section to hide. We loop through the sections and remove minus with toggle if it matches the element clicked and then any other item if it doesn't have minus it gets added on to make sure it's hidden.
function openSection(e) {
// we use - 1 because lists start at 0
const el = e.srcElement.classList.value - 1;
sections.forEach((section, index) => {
if (index === el) {
section.classList.toggle('minus')
} else if (!section.classList.contains('minus')) {
section.classList.add('minus')
}
})
}
Working example
https://codepen.io/anon/pen/KoWgwm
Stuff used
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

How to replace two class attribute in html content?

In my project, I fetch html content from DB with ajax, and these content will appear in web in div with id of timeTagDiv.
If My name is John, it should appears:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
If my name is snow, it should appears:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
Here is my ajax code:
var stChr="John";
var stTrnStr="translateto";
$.ajax({
......
success:function(data)
{
var $myHtml = $(data.stPrc);
$myHtml.find("label").filter(function(){
return $(this).text()===stChr;
}).parent().attr("class", "rightd");
//$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
$('#timeTagDiv').html($myHtml);
}
});
Here is the content of data.stPrc from DB:
<div class="leftd">
<label>17:05:31</label>
<label>John</label>
<label> translateto</label>
<label>maintanceGroup</label>
</div>
<div class="leftd">
<div class="speech left" >letMnGrpmakeit</div>
</div>
<div class="leftd"><label>17:05:53</label>
<label>snow</label>
<label> acceptSheet</label>
</div>
<div class="leftd">
<label>17:06:04</label>
<label>snow</label>
<label> translateto</label>
<label>leadGrp</label>
</div>
<div class="leftd">
<div class="speech left" >leadercheckit</div>
</div>
When the context of label is John, the attribute class of parent div changed to rightd. Here is the code working successfully:
$myHtml.find("label").filter(function(){
return $(this).text()===stChr;
}).parent().attr("class", "rightd");
And then, the content of letMnGrpmakeit belongs to John should at the right side. So the next two divs class should be set class="rightd" and class="speech right".
In my example, before:
<div class="leftd">
<div class="speech left" >letMnGrpmakeit</div>
</div>
after replace:
<div class="rightd">
<div class="speech right" >letMnGrpmakeit</div>
</div>
I use :
$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().next().attr('class','speech right');
But unfortunately, they both worked fail.
I have tried one condition:
$myHtml.find('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
It works, but it appears like:
17:05:31 John translatetomaintanceGroup
letMnGrpmakeit
17:05:53 snow acceptSheet
17:06:04 snow translatetoleadGrp
leadercheckit
"leadercheckit" should under "17:06:04 snow translatetoleadGrp", because it belongs to snow.
I have no idea about this. The key to change two div class are two conditions.
Who can help me?

I'm not sure I understand everything correctly because of wording and grammar, but I would suggest using addClass('className') and removeClass('className') instead. This way if your element has more than one class, it will only remove the desired class. By using .attr('class', 'className'), you're replacing everything. If you wish to add multiple classes, just use .addClass('class-1 class-2')

Use these:
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');
$myHtml.find('label:contains('+stChr+')').next('label:contains('+stTrnStr+')').parent().next().children("div").eq(0).attr('class','speech right');

Determining which element was clicked and conditionally choosing which method to call

I am attempting to use JQuery to make 3 thumbnails into buttons that each open up their own page element with details regarding the picture.
Right now I have succeeded in making it so that any thumbnail causes a page element (of the class "description") to scroll open and closed when any thumbnail (from the class "thumbnail") is clicked.
How do I check which thumbnail is clicked on so that I can open a different description corresponding to that specific thumbnail? (This is what I was attempting to do with the "select").
var main = function() {
$('.thumbnail').click(function(select) {
var description = $('.game-descriptions').children('.description');
if( description.is(":hidden")) {
description.slideDown("slow");
}
else
description.hide();
});
}
$(document).ready(main);

Use a data attribute to specify what the thumbnail click is targeting, example: data-target="#game-1", add IDs to your descriptions that match and use data() to use the attribute value of #game-1 a jQuery selector.
Here is a demo
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});
HTML
<img class="thumbnail" data-target="#game-1" />
<img class="thumbnail" data-target="#game-2" />
<div class="game-descriptions">
<div id="game-1" class="description"></div>
<div id="game-2" class="description"></div>
</div>
Any toggling like toggle(), slideToggle(), fadeToggle() handles the is hidden or is visible

jsFiddle
The parameter to the click function is a jQuery event object, which can be useful in adding some event handling logic. However, within the context of the handler, this refers to the element which triggered the click event, and is typically sufficient for any targeted logic.
Assuming the thumbnails and descriptions have similarly named IDs, for example, you can do something like this:
$(function () {
$('.thumbnail').click(function (event) {
var descId = this.id.replace("thumb", "desc");
var description = $('.game-descriptions').children('#' + descId);
// or simply $("#" + descId);
description.toggle("slow");
});
});
HTML
<div>
<div class="thumbnail" id="thumb-1">Thumb 1</div>
<div class="thumbnail" id="thumb-2">Thumb 2</div>
<div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
<div class="description" id="desc-1">Description One</div>
<div class="description" id="desc-2">Description Two</div>
<div class="description" id="desc-3">Description Three</div>
</div>
Your technique for targeting the correct 'description' will depend on your actual DOM structure, however.
Also note that I substituted the toggle method for your if statement, as the logic you have is equivalent to what it does (i.e. toggling object visibility).

What would fix a link within a div that is currently used as a clickable div

Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of "block". What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn't seem to help as all.
This is my markup:
What is ElectedFace?
<div class="flip_content" id="flip1">
<div class="content-info">
<h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
<p>electedface is America's free social network delivering more real time news, faster than any other website.</p>
<p>electedface connects subscribers to their elected officials with active electedface accounts</p>
<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
<h4>Getting Started</h4>
</div>
</a>
<div class="flip_content" id="flip2">
<div class="content-info">
<p> There are three ways to connect:</p>
<p>Read top news stories and Read local news stories</p>
<p>Connect to your elected officials and start a group in your community</p>
<p>Register for free membership</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
<h4>Next Steps</h4>
</div>
</a>
<div class="flip_content" id="flip3">
<div class="content-info">
<p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
</div>
</div>
Heres my Javascript
<script type="text/javascript">
$(function(){
$('.flip_switch').bind("click",function(){
var element = $(this);
var content = element.data("content_container");
var flip_container = element.data("flip_container");
var active_flipbox = $('.activeFlip');
if(element.hasClass('activeFlip')){
//If the flipbox is already flipped
flip_container.revertFlip();
}
else{
if(active_flipbox){
//Revert active flipbox
active_flipbox.revertFlip();
//Remove active status
active_flipbox.removeClass('activeFlip');
}
$(flip_container).flip({
direction: 'rl',
color: '#c8cbce',
content: $(content).html(),
speed:100,
onBefore: function(){
$(flip_container).addClass('activeFlip');
}
});
}
return false;
});
});
</script>

It seems to me your problem is so called bubbling
What you need is (most likely :) :
http://api.jquery.com/event.stopPropagation/