how hide the div when click on the another div - javascript

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>

Related

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';
});
});

Make "continue" button appear when items selected and disappear when items unselected

My question is abou make "continue" button appear when items selected and disappear when items unselected using JavaScript.
var typpro = document.getElementsByClassName("typpro"),
continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if (this.classList.contains("active")) {
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Volume Button</button>
</div>
</div>
<div class=" col-xs-12">
<div class="typpro">
<button style="width:98%">Other</button>
</div>
</div>
<div class=" col-xs-12">
<div class="inputpro">
<input type="text" placeholder="your Problem">
</div>
</div>
<div class=" col-xs-12">
<div class="continue">
<button>Continue</button>
</div>
</div>
</div>
</div>
So, you've got a couple of things working against you with your code as it stands.
Firstly, you need to actually define your continubutton variable, like so:
HTML
<button id="continubutton" style="display: none;">Continue</button>
JS:
var continubutton = document.getElementById('continubutton');
Then, you also need to define your typpro variable, like so:
JS:
var typpro = document.getElementsByClassName('typpro');
For what you're trying to do, I went with display: inline and display: none, instead of the height change because there would be a fair amount of additional CSS you would need to do to accomplish this. But here is the final result:
HTML:
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<button id="continubutton" style="display: none;">Continue</button>
</div>
And the JS:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementById('continubutton');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.display = "inline";
} else {
continubutton[0].style.display = "none";
}
};
}
EDIT: Since using height seems to be the route we need to go, here is updated code:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementsByClassName('continue');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<div class="continue" style="height: 0;overflow:hidden;">
<button id="continubutton">Continue</button>
</div>
</div>
It's important that you set the initial height on your <div class="continue"></div> container, and that you set it to overflow: hidden; so anything that falls outside of the bounding box is hidden from view. This will allow you to animate the height so the button appears "hidden" until an option is selected.
the solution is
for (let btn of typpro) {
btn.addEventListener('click', function() {
let token = 0;
this.classList.toggle('active');
for (let i = 0; i < typpro.length; i += 1) {
if (typpro[i].classList.contains('active')) {
token += 1;
}
}
if (token > 0) {
continubutton[0].style.height = '100px';
} else {
continubutton[0].style.height = '0';
}
});
}

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;
}
}
}

JQuery run a function when a div shows

I want to run a function when a div shows.
HTML:
<div id="holder">
<div id="main1" class="container-fluid">
<h1>Header 1</h1>
<div class="btn btn-default pull-right" onclick="show('main2');">Next</div>
</div>
<div id="main2" class="container-fluid" style="display:none;">
<h1>Header 2</h1>
<div class="btn btn-default pull-right" onclick="show('main3');">Next</div>
</div>
<div id="main3" class="container-fluid" style="display:none;">
<h1>Header 3</h1>
</div>
</div>
JS:
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
I want to run a function when my #main3 shows. The function is to set a timer so that after showing #main3 for 10 sec, it will show #main1.
Now how do I detect when my #main3 shows?
You can check for elementID, if it is main3, then set setTimeout for 10000 ms (10s) and call show('main1') in timeout after the line ele.style.display = 'block'; as following:
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
if(elementID == "main3"){
setTimeout(function(){ show("main1"); }, 10000);
}
}
DEMO
Since you have used jQuery tag, you can use a jQuery solution in which we can see whether the current tab is the last one if so then use a timer to show the first one like
jQuery(function($) {
$('#holder .nxt').click(function() {
var $parent = $(this).parent();
var $next = $parent.hide().next().show();
if ($next.is(':last-child')) {
setTimeout(function() {
$next.hide().siblings().first().show();
}, 2500)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<div id="main1" class="container-fluid">
<h1>Header 1</h1>
<div class="btn btn-default pull-right nxt">Next</div>
</div>
<div id="main2" class="container-fluid" style="display:none;">
<h1>Header 2</h1>
<div class="btn btn-default pull-right nxt">Next</div>
</div>
<div id="main3" class="container-fluid" style="display:none;">
<h1>Header 3</h1>
</div>
</div>
after this:
ele.style.display = 'block';
you can have a check like:
ele.style.display = 'block';
if(ele.id === "main3"){
// call it here.
}
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
var pages = document.getElementsByClassName('container-fluid');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
if(elementID=='main3'){
yourFunction();// call your function here!
}
}

javascript: onclick go to specific div

I'm trying to create a "diagram" with divs. If user click on next it will show the next div and so on (this is done), but the thing i'm trying to reach is, sometimes some divs will have a question with "yes" or "no" buttons, and those buttons will target to some specific div.
Ex: Div 1 - Are you ok ? Yes - Go to Div 2 | No - Go to Div 3.
Is there a way to make this dynamic ? All divs have an ID.
Here's the code i've got so far.
HTML
<div id="main">
<h3 class="despistes">Some Title</h3>
<div class="info" id="1" style="display:block">Div 1</div>
<div class="info" id="2">Div 2</div>
<div class="info" id="3">Div 3</div>
<div class="info" id="4">Div 4</div>
<div class="info" id="5">Div 5</div>
<div class="info" id="6">Div 6</div>
<div class="info" id="7">Div 7</div>
<div class="info" id="8">Div 8</div>
<button class="button" onclick="mostraDiv('inicio')" style="float:left">inicio</button>
<button class="button" onclick="mostraDiv('avancar')" style="float:right">seguinte</button>
<button class="button" onclick="mostraDiv('anterior')" style="float:right">retroceder</button>
</div>
JS
var divNo = 0;
function mostraDiv(direction) {
var sel = document.getElementById('main').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
switch (direction) {
case 'inicio' : divNo = 0; break;
case 'anterior' : divNo--; break;
case 'avancar' : divNo++; break;
case 'ultima' : divNo = sel.length-1; break;
}
if (divNo > sel.length-1) { divNo = 0; }
else { if (divNo < 0) { divNo = sel.length-1; } }
sel[divNo].style.display = 'block';
}
onload = function() {
mostraDiv('s');
};
This function i found here and works fine for me.
Thanks in Advance.
try this :
<p>Are You OK ?</p>
<button class="button" onclick="goToDiv(2)" style="float:left">Yes</button>
<button class="button" onclick="goToDiv(3)" style="float:left">No</button>
function goToDiv(divNo) {
var sel = document.getElementById('main').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
if (divNo > sel.length-1) { divNo = 0; }
else { if (divNo < 0) { divNo = sel.length-1; } }
sel[divNo].style.display = 'block';
}

Categories