We Keep Coding

how hide the div when click on the another div

when I click another div it is coming down the previous div but I want it should come at the same place of the previous div without clicking the previous div(to close)
<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop1')"> (CARD) </div>
<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop2')"> (CARD) </div>
<div class="drop col-12" id="drop1" style="display:none" >..</div>
<div class="drop col-12" id="drop2" style="display:none" >..</div>
function drop_down(e){
var x = document.getElementById(e);
if(x.style.display === "none"){
x.style.display = "block";
}
else{
x.style.display = "none";
}
}

If I understand your problem statement, you want the visible drop down to hide before the new drop down is shown.
To do that, simply hide all the dropdowns before performing your logic:
function drop_down(e){
var x = document.getElementById(e);
const xIsShowing = x.style.display === "block";
document.getElementById('drop1').style.display = 'none';
document.getElementById('drop2').style.display = 'none';
if(!xIsShowing) {
x.style.display = "block";
}
}

Something like this?
function drop_down(e){
var drop = document.getElementsByClassName('drop')
for(var i = 0; i < drop.length; i++){
if(e == drop[i].id){
drop[i].style.display = "block";
}
else{
drop[i].style.display = "none";
}
}
}
<div class="col-sm-6 col-lg-3" onclick="drop_down('drop1')"> (CARD) </div>
<div class="col-sm-6 col-lg-3" onclick="drop_down('drop2')"> (CARD) </div>
<div class="drop col-12" id="drop1" style="display:none" >Div one</div>
<div class="drop col-12" id="drop2" style="display:none" >Div two</div>

Vanilla JavaScript slideToggle to next item

I want to make dropdown item using vanilla js that has the same jQuery functionality with the next method. Because same class name not working with vanilla js
var button = document.querySelector('.ms-dropdown');
button.addEventListener('click', function(event) {
var next = this.nextElementSibling;
if (next.style.display == "none") {
next.style.display = "block";
} else {
next.style.display = "none";
}
});
<div class="ms-dropdown p-3">
<div class="row no-gutters align-items-center">
<div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
<div class="col-auto ml-2">Budesliga <span>(16)</span></div>
</div>
</div>
<div style="display:none">
asdfasdf
</div>
<div class="ms-dropdown p-3">
<div class="row no-gutters align-items-center">
<div class="col-auto"><img src="images/tr-flag.png" alt="" /></div>
<div class="col-auto ml-2">Budesliga <span>(16)</span></div>
</div>
</div>
<div style="display:none">
asdfasdf
</div>

MayBe Or Maybe not What you looking for
var button = document.querySelectorAll('.ms-dropdown');
for(let i = 0 ; i < button.length;i++){
button[i].addEventListener('click', function(event) {
var next = this.nextElementSibling;
if (next.style.display == "none") {
next.style.display = "block";
} else {
next.style.display = "none";
}
})
};

Please try this
document.querySelectorAll('.ms-dropdown').forEach(function(item,i){
item.addEventListener('click',function(){
var next = this.nextElementSibling;
next.style.display = next.style.display == 'none' ? 'block' : 'none';
});
});

Expand/hide collapsible using javascript

I want to implement expandable menu. Only one heading should be expanded. When user clicks on another one, content of the previously
expanded heading should hide. I have used code from w3schools, but I don't know how to automatically hide previous heading.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text</p>
</div>

Simply collapse opened collapsible on click by JS:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
if (this.classList.contains("active")) {
content.style.opacity = 0;
} else {
if(node=document.querySelector(".collapsible.active")){
node.classList.toggle("active",false);
node.nextElementSibling.style.opacity = 0;
}
content.style.opacity = 1;
}
this.classList.toggle("active");
});
}
.content{
opacity:0;
transition:opacity 0.5s;
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text1</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text2</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text3</p>
</div>
Or, to use with height, you'll need to add overflow-y:hidden to hide it completely:
var coll = document.getElementsByClassName("collapsible");
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
console.trace()
debugger
var content = this.nextElementSibling;
if (this.classList.contains("active")) {
content.style.height = 0;
} else {
if(node=document.querySelector(".collapsible.active")){
node.classList.toggle("active",false);
node.nextElementSibling.style.height = 0;
}
content.style.height = content.scrollHeight+"px";
}
this.classList.toggle("active");
});
}
.content{
height:0;
transition:height 0.5s;
overflow-y:hidden;
}
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>text1</p>
</div>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
<p>text1</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
<p>text2</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>text3</p>
</div>

A more readable way to do this is to divide your code in functions, like this:
<script>
function hideOthers(actual) {
var contentDivs = document.querySelectorAll('.content');
contentDivs.forEach(others => {
if (others !== actual) {
others.style.display = 'none';
}
});
}
function toggleDisplay(div) {
if (div.style.display === "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
function onContentLoaded() {
var collapsibleDivs = document.querySelectorAll(".collapsible");
collapsibleDivs.forEach(div => {
div.addEventListener('click', e => {
var clicked = e.srcElement;
var sibling = clicked.nextElementSibling;
toggleDisplay(sibling);
hideOthers(sibling);
})
})
}
document.addEventListener("DOMContentLoaded", onContentLoaded);
</script>
Notice I've just changed your JS script and I've used document.querySelectorAll to get all elements with a given class, forEach function to iterate over elements, arrow functions to provide callbacks and e.srcElement to get the clicked element on the click handler. Hope it help you. Welcome to SO!

Showing and hiding div tags by their ID order using a button

I made a small questionnaire and I placed each question in a div tag. I'm trying to display the div tags in order, so when the user click the "Next" button it will move on to the next div and hide the previous one. Kind of like a paging system? I thought about creating some sort of a for loop but I feel like my code is super messy. Any suggestions? Thanks in advance.
<form>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button type="button">Next</button>
<button type="button">Back</button>
</form>
<script>
visible(){
document.getElementById('1').style.display = "block";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
}

You can use javascript functions to setup your divs. This uses jQuery for smooth transition as well.
<div id="1">Question 1</div>
<div id="2" class="hidden">Question 2</div>
<div id="3" class="hidden">Question 3</div>
<div id="4" class="hidden">Question 4</div>
<div id="5" class="hidden">Question 5</div>
<div id="6" class="hidden">Question 6</div>
<div id="7" class="hidden">Question 7</div>
<div id="8" class="hidden">Question 8</div>
<div id="9" class="hidden">Question 9</div>
<div id="10" class="hidden">Question 10</div>
<button type="button" onclick="reverseDiv();">Back</button>
<button type="button" onclick="advanceDiv();">Next</button>
<script>
var divNum=1;
advanceDiv = function() {
if(divNum < 10) {
divNum++;
$('#' + (divNum-1)).slideToggle();
$('#' + divNum).slideToggle();
}
else {
/* last slide reached */
alert('last question');
}
}
reverseDiv = function() {
if(divNum > 1) {
divNum--;
$('#' + (divNum+1)).slideToggle();
$('#' + divNum).slideToggle();
}
else {
alert('first question');
}
}
</script>
Here's a jsfiddle to show functionality (and also includes arrow keys to move between functions): https://jsfiddle.net/79xupebb/1/

To think about the start and the end in this is case is important.
What happens if you are at the end and then click the next button? Then you have to go to the start. And if you are at the start point and click the previous button, you have to go to the end:
if(current === start && direction === "prev") current = end;
if(current === end && direction === "next") current = start;
To make all the divs display: none and only the first one display: block use CSS, like:
#container div {
display: none;
}
#container div:first-child {
display: block;
}
with HTML
<div id="container">
<div id="1">div1</div>
<div id="2">div2</div>
<div id="3">div3</div>
...
</div>
All togehter with plain JavaScript:
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var start = 1;
var end = 10;
var current = 1;
function slide(direction, start, end) {
document.getElementById(current).style.display = "none";
if(current === start && direction === "prev") {
current = end;
} else if(current === end && direction === "next") {
current = start;
} else if(direction === "next") {
current += 1;
} else if(direction === "prev") {
current -= 1;
}
document.getElementById(current).style.display = "block";
}
prev.addEventListener("click", function() {
slide("prev", start, end);
});
next.addEventListener("click", function() {
slide("next", start, end);
});
#container div {
display: none;
}
#container div:first-child {
display: block;
}
<div id="container">
<div id="1">div1</div>
<div id="2">div2</div>
<div id="3">div3</div>
<div id="4">div4</div>
<div id="5">div5</div>
<div id="6">div6</div>
<div id="7">div7</div>
<div id="8">div8</div>
<div id="9">div9</div>
<div id="10">div10</div>
<button id="prev" type="button">Previous</button>
<button id="next" type="button">Next</button>
</div>

There is a simple way to do what you want. Use a counter (current), start it at 1 and increase it/ decrease it whenever the user clicks one of the buttons, then loop through your div list and make them all display:none except the one that corresponds to your current value.
var current = 1;
function next(){
current+=1;
for(var i = 1; i<10; i++){
document.getElementById(i).style.display = ((current==i)?"block":"none");
}
}
function back(){
current-=1;
for(var i = 1; i<=10; i++){
document.getElementById(i).style.display = ((current==i)?"block":"none");
}
}
<form>
<div id="1" style="display:block">one</div>
<div id="2" style="display:none">two</div>
<div id="3" style="display:none">three</div>
<div id="4" style="display:none">four</div>
<div id="5" style="display:none">five</div>
<div id="6" style="display:none">six</div>
<div id="7" style="display:none">aaaa</div>
<div id="8" style="display:none">bbb</div>
<div id="9" style="display:none">nnn</div>
<div id="10" style="display:none">ggg</div>
<button type="button" onclick="next()">Next</button>
<button type="button" onclick="back()">Back</button>
</form>
Note: My code has no safeguards so it will go below 1 and above 10, you can always check with an if statement in each of the buttons' functions.

var i;
for(i=2;i<=10;i++)
document.getElementById(''+i).style.display = "none";
i=1;
document.getElementById('btnNext').onclick = function(){
document.getElementById(''+i).style.display = "none";
i++;
document.getElementById(''+i).style.display = "block";
}
document.getElementById('btnPrev').onclick = function(){
document.getElementById(''+i).style.display = "none";
i--;
document.getElementById(''+i).style.display = "block";
}
<form>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
<div id="8">8</div>
<div id="9">9</div>
<div id="10">10</div>
<button type="button" id="btnNext">Next</button>
<button type="button" id="btnPrev">Back</button>
</form>

Add the onclick property to your buttons first:
<button type="button" onclick="showNext()">Next</button>
<button type="button" onclick="showPrev()">Back</button>
Then retrieve the divs by adding the class="quest" to every div
var el = document.getElementsByClassName("quest");
function showNext(){
for(var i=0;i<el.length; i++){
if (el[i].style.display == "block"){
el[i].style.display = "none";
if ((i+1)==el.length) i=-1;
el[i+1].style.display = "block";
break;
}
}
}
function showPrev(){
for(var i=0;i<el.length; i++){
if (el[i].style.display == "block"){
el[i].style.display = "none";
if (i==0) i=el.length;
el[i-1].style.display = "block";
break;
}
}
}

Change slider's next and previous button to be previews of upcoming or previous pictures

Hey so i have a slider and i need to change the next and previous button backgrounds to show a preview of the next and previous slide. I don't know if it's possible without jQuery but since i'm working on an all javascript slider i'd very much appreciate a javascript solution
This is the HTML
<body onload="Load()"
<div class="container">
<div class="slider">
<div class="slides" id="slide1">
<img src="img/1.jpg">
</div>
<div class="slides" id="slide2">
<img src="img/2.jpg">
</div>
<div class="slides" id="slide3">
<img src="img/3.jpg">
</div>
</div>
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
</div>
</body>
And the Javascript
nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
Effect();
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
PS: I do realize that this is doable in jQuery but i need a javascript solution. And if you are going to downvot at least leave a reason

nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
ShowNextPrev(nrShown);
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
ShowNextPrev(nrShown);
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
ShowNextPrev(nrShown);
Effect();
}
function ShowNextPrev(nrShown)
{
var nrShown2 = nrShown == nrSlide-1 ? -1 : nrShown;
document.querySelector(".next").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown2+1].src+")";
document.querySelector(".next").querySelector("input").style.backgroundSize = "contain";
var nrShown3 = nrShown == 0 ? nrSlide : nrShown;
document.querySelector(".prev").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown3-1].src+")";
document.querySelector(".prev").querySelector("input").style.backgroundSize = "contain";
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
Load();
.ctrl > div {
display: inline-block;
}
.slides > img {
height: 40px;
}
<div class="slider">
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
<div class="slides" id="slide1">
<img src="https://lh6.googleusercontent.com/-Ze9FLpwZjdE/AAAAAAAAAAI/AAAAAAAAAA8/YOtXVkTZpNs/photo.jpg">
</div>
<div class="slides" id="slide2">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-green-icon.png">
</div>
<div class="slides" id="slide3">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-black-icon.png">
</div>
</div>
</div>
This approach should do it. In plain JavaScript using querySelector() and querySelectorAll. You just need the code. The CSS and HTML are just altered to make it work for the example.