We Keep Coding

Add one div ans class to one specific div if multiple div have the same class? (Javascript)

In a class exercise, (studying Javascript), I need to add a div with the class q6 under an existing div for the question 6. Teacher made it harder(at least for me), as all questions have div with class question.
Is there a way to select a specific div if they all have the same class?
Here's an example of the html code (I translated the question, as it was in french):
<div id="content">
<div class="question">
<h2> Question 1. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q1"></div>
</div>
<div class="question">
<h2>Question 2. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q2"></div>
</div>
<div class="question q3">
<h2>Question 3. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question">
<h2>Question 4. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question q5">
<h2>Question 5. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question">
<h2>Question 6. <span>(2pts)</span></h2>
<h3>
Add a div with class <code>q6</code> at the end of the <code>h3</code> in this
question, in the <code><div class="question"></code>. If it's well
placed, an orange square will appear.
</h3>
<!-- You need to add the div here with javascript: <div class="q6"></div> -->
</div>
</div>
thanks for your answers

there are several ways to do it, here are some of them.
// fig 1
// use index
const questions = document.getElementsByClassName('question')
questions[5].innerHTML = 'fig 1 work'
// fig 2
// use data- prefix
// this should be the preferred way because this is easier to maintain
// when the list is dynamically created.
// also data- prefix is the least aggresive with web semantics
const target = document.querySelector(`.question[data-key='6']`)
if (target) {
target.innerHTML += 'fig2 work'
}
// fig 3
// use multiple classes
const targetAlt = document.querySelector('.question.q6')
if (targetAlt) {
target.innerHTML += 'fig3 work'
}
<div id="content">
<div class="question">
<h2> Question 1. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q1"></div>
</div>
<div class="question">
<h2>Question 2. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q2"></div>
</div>
<div class="question q3">
<h2>Question 3. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question">
<h2>Question 4. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question q5">
<h2>Question 5. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question q6" data-key="6">
<h2>Question 6. <span>(2pts)</span></h2>
<h3>
Add a div with class <code>q6</code> at the end of the <code>h3</code> in this question, in the <code><div class="question"></code>. If it's well placed, an orange square will appear.
</h3>
<!-- You need to add the div here with javascript: <div class="q6"></div> -->
</div>
</div>

One of the best method will be
Select all the nodes with class question with document.querySelectorAll
Parse the list of nodes and search of h2 tag.
Check whether that h2 tage consist of text Question 6.
If this condition satisfies then that will be the target node.
Create a dic using document.createElement("div") and assign the className as q6. Append this new node to the node that have been identfied on previous step.
Working Fiddle
function addDiv() {
const questionNodes = document.querySelectorAll('.question');
let searchNode;
questionNodes.forEach((node) => {
const questionNode = node.querySelector('h2');
if (questionNode.innerHTML.includes('Question 6.')){
searchNode = node;
}
});
if(searchNode) {
const newContent = document.createElement("div");
newContent.className = 'q6';
searchNode.appendChild(newContent);
}
}
.q6 {
width: 100%;
height: 200px;
background: brown;
}
<div id="content">
<div class="question">
<h2> Question 1. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q1"></div>
</div>
<div class="question">
<h2>Question 2. <span>(2pts)</span></h2>
Lorem ipsum
<div class="q2"></div>
</div>
<div class="question q3">
<h2>Question 3. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question">
<h2>Question 4. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question q5">
<h2>Question 5. <span>(3pts)</span></h2>
Lorem ipsum
</div>
<div class="question">
<h2>Question 6. <span>(2pts)</span></h2>
<h3>
Add a div with class <code>q6</code> at the end of the <code>h3</code> in this
question, in the <code><div class="question"></code>. If it's well
placed, an orange square will appear.
</h3>
<!-- You need to add the div here with javascript: <div class="q6"></div> -->
</div>
</div>
<button onclick="addDiv()">Add Div</button>

How to show overflow hidden element in div jquery

In my application there are a lot of buttons inside a div.
Initially I am showing three buttons in div width 400 px. Overflow:hidden will hide the remaining elements. I have added below css for div, having right arrow button in my application.
Can anybody body tell how I, if user clicks arrow button, can show next button elements occupying the same width in jquery? If user clicks again I need to show remaining elements up to last element
My html structure is below
.parentdiv {
display: inline-flex width:400px;
overflow: hidden;
}
<div class="parentdiv">
<div class="childdiv">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>

What you want to do is.... a LOT more complicated than you think it is, and will require a lot of javascript.
It's usually not worth it to try to reinvent the wheel by hand. The correct solution to accomplish what you want is to use a "carousel" plugin. (Many, many different people have created plugins like this. You can simply google for it.)
If you are using Wordpress, then you should search for a Wordpress plugin.
If you simply want a plug-and-play solution that will work with any website, Slick is the best carousel plugin that I know of, and it works great with jQuery.

Using jQuery you can achieve that.
jQuery library is required
clicked = 1;
divSW = document.getElementByClassName('parentdiv').scrollWidth;
$('button#nxtBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSW > divSL){
clicked++;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})
But you need to add a next button in your HTML code with an id attribute of nxtBtn
<button id="nxtBtn">next</button>
If you need to see the previous buttons in the div you will add another button to your HTML code with an id of prvBtn.
<button id="prvBtn">previous</button>
Then you also add this code below
$('button#prvBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSL > 0){
clicked--;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})

$("#after").on("click", function() {
for (var i = 0; i < 3; i++)
$(".childdiv:not(.show)").eq(0).addClass("show");
});
#after {
background: lightgrey;
display: block;
width: 250px;
text-align: center;
padding: 2px 0;
cursor: pointer;
border-radius: 5px;
margin-top: 5px;
}
#after:hover {
text-decoration: underline;
}
.childdiv {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="childdiv show">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv show">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv show">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>
<a id="after">after \/</a>
</div>

Click to hide each div and show another div in jquery

I am new to jQuery. Trying to hide the first div and show second div. When I again click on 2nd div, it will show me the first div.
Here is my code.
$(".c1").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
$(".c2").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>

You have your fadeOut and fadeIn calls inverted.
You need to prevent the a link behavior.
Pass as callback your fadeIn call.
Look at this code snippet with those fixes
I've added a hide class to show how the DIVs appear and disappear.
$(".c1").on('click', function(e) {
e.preventDefault();
$(".one").fadeOut(function() {
$(".two").fadeIn();
});
});
$(".c2").on('click', function(e) {
e.preventDefault();
$(".two").fadeOut(function() {
$(".one").fadeIn();
});
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two hide">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
See? now is working your logic!

First, it will work better if you use spans instead of links
The nyou have the order of fadein/fadeout confused:
$(".c1").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
$(".c2").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>

Your code is working you only need to remove the href="" from your <a> tag. However, here is my way of doing it if you like to take a look. And the edited version of the HTML
$('.c1').click(function () {
$('.one').fadeIn();
$('.two').fadeOut();
})
$('.c2').click(function () {
$('.two').fadeIn();
$('.one').fadeOut();
})
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>

Jquery how to find element from outside

I would like to find an element which is outside from element which I'm trying click.
I need to click #form-1 and slideToggle .business-form-kaufen.
You can look hierarchy in the picture.
Thanks for help!

You need to go up two DIV levels from the button, then go to the next DIV, and find .business-form-kaufen in there.
$(".button").click(function() {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});

Use .parent() relatively
$("#form-1").on("click", function(evt) {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
Or if you can either edit your html to add some id to the .business-form-kaufen or be sure that it is only this single element of this class, you can do it much simpler:
$("#form-1").on("click", function(evt) {
$(".business-form-kaufen").slideToggle();
// $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>

I assume form and business-form-kaufen are 1 to 1 relationship? I'd put them together in a container and use parents() to find the container and then find() to look for the business-form-kaufen.
This way, the code is smart enough to look for the business-form-kaufen without the need to hard code the DOM structure.

Clicking anywhere but certain element using stopPropagation

I'm trying to use the answer to this question to implement exactly what that user wants to do.
I am basically making a popover that appears when you click on a link, and when you click anywhere except the popover it will close, and if you click the link that opened it, it will also close it.
The problem I'm having is that nothing happens when I click on the link, when I remove all the stopPropagation stuff it opens but doesn't close.
Here is my JavaScript:
function close_popovers(){
$('.new_tooltip').remove();
}
function toggle_popover(user_id){
$('.new_tooltip').show();
var position = $('#link_' + user_id).position();
var top_position = (position.top - $('.new_tooltip').outerHeight()) - 10;
var left_position = (position.left - ($('.new_tooltip').outerWidth() / 2) + ($('#link_' + user_id).outerWidth() / 2));
$('.new_tooltip').css ({
top: top_position + "px",
left: left_position + "px"
});
return false;
}
$(document).click(function() {
close_popovers();
});
$(".new_tooltip, .stoppropagation").click(function(e) {
e.stopPropagation();
return false;
});
Here is the html link that opens the popover:
Adam Tester
And finally the html of my popover:
<div class="new_tooltip" id="popover_34" style="display:none; top:0px; left:0px; position:absolute; z-index:1000;">
<div class="top">
<div class="picture">
<div class="userphotomedium">
<img class="actual_photo" src="image url" width="31" height="31" />
</div>
</div>
<div class="infomation">
<div class="name main_text_colour">Name</div>
<div class="role">Department of Science and Research - Subdivision 3</div>
</div>
<div class="buttons">
<div class="closebtn_con">
<div class="crossbtn" style="float:none;"></div>
</div>
<div class="viewbtn_con">
<div>View Bio</div>
</div>
</div>
<div class="floatfix"></div>
</div>
<div class="bottom">
<dl>
<dt>Department</dt>
<dd class="main_text_colour">Medical, Business Unit Head</dd>
<dt>Country</dt>
<dd class="main_text_colour">United Kingdom</dd>
<dt>Email</dt>
<dd class="main_text_colour">adam.tester#edge.co.uk</dd>
<dt>Contact Number</dt>
<dd class="main_text_colour">01832 300097</dd>
<dt>Mobile Number</dt>
<dd class="main_text_colour">07710 664 689</dd>
</dl>
<div class="bio" id="bio_34" style="background-color:#FFFFFF; position:relative; z-index:100;">
<div class="main_text_colour" style="font-weight:bold;">Biography</div>
<div id="bio_width_34" style="white-space:pre-wrap; overflow-y:scroll; height:100px; width:100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</div>
</div>

Check some of the mistakes in your code:
Use $(".new_tooltip, .stoppropagation") instead of $(".new_tooltip .stoppropagation").
$('.new_tooltip').remove(); will remove the popup and you cannot display it again. Try $('.new_tooltip').hide(); instead.
In your code, you always show the popup when clicking on the link. Try $('.new_tooltip').toggle(); or check for the current state and show, hide accordingly.